<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/webappapis.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:53 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=speculative-loading.html>← 7.6 Speculative loading</a> — <a href=index.html>Table of Contents</a> — <a href=dynamic-markup-insertion.html>8.4 Dynamic markup insertion →</a></nav><ol class=toc><li id=toc-webappapis><a href=webappapis.html#webappapis><span class=secno>8</span> Web application APIs</a><ol><li><a href=webappapis.html#scripting><span class=secno>8.1</span> Scripting</a><ol><li><a href=webappapis.html#introduction-11><span class=secno>8.1.1</span> Introduction</a><li><a href=webappapis.html#agents-and-agent-clusters><span class=secno>8.1.2</span> Agents and agent clusters</a><ol><li><a href=webappapis.html#integration-with-the-javascript-agent-formalism><span class=secno>8.1.2.1</span> Integration with the JavaScript agent formalism</a><li><a href=webappapis.html#integration-with-the-javascript-agent-cluster-formalism><span class=secno>8.1.2.2</span> Integration with the JavaScript agent cluster formalism</a></ol><li><a href=webappapis.html#realms-and-their-counterparts><span class=secno>8.1.3</span> Realms and their counterparts</a><ol><li><a href=webappapis.html#environments><span class=secno>8.1.3.1</span> Environments</a><li><a href=webappapis.html#environment-settings-objects><span class=secno>8.1.3.2</span> Environment settings objects</a><li><a href=webappapis.html#realms-settings-objects-global-objects><span class=secno>8.1.3.3</span> Realms, settings objects, and global objects</a><ol><li><a href=webappapis.html#entry><span class=secno>8.1.3.3.1</span> Entry</a><li><a href=webappapis.html#incumbent><span class=secno>8.1.3.3.2</span> Incumbent</a><li><a href=webappapis.html#current><span class=secno>8.1.3.3.3</span> Current</a><li><a href=webappapis.html#relevant><span class=secno>8.1.3.3.4</span> Relevant</a></ol><li><a href=webappapis.html#enabling-and-disabling-scripting><span class=secno>8.1.3.4</span> Enabling and disabling scripting</a><li><a href=webappapis.html#secure-contexts><span class=secno>8.1.3.5</span> Secure contexts</a></ol><li><a href=webappapis.html#scripting-processing-model><span class=secno>8.1.4</span> Script processing
  model</a><ol><li><a href=webappapis.html#script-structs><span class=secno>8.1.4.1</span> Scripts</a><li><a href=webappapis.html#fetching-scripts><span class=secno>8.1.4.2</span> Fetching scripts</a><li><a href=webappapis.html#creating-scripts><span class=secno>8.1.4.3</span> Creating scripts</a><li><a href=webappapis.html#calling-scripts><span class=secno>8.1.4.4</span> Calling scripts</a><li><a href=webappapis.html#killing-scripts><span class=secno>8.1.4.5</span> Killing scripts</a><li><a href=webappapis.html#runtime-script-errors><span class=secno>8.1.4.6</span> Runtime script errors</a><li><a href=webappapis.html#unhandled-promise-rejections><span class=secno>8.1.4.7</span> Unhandled promise rejections</a><li><a href=webappapis.html#import-map-parse-results><span class=secno>8.1.4.8</span> Import map parse results</a><li><a href=webappapis.html#speculation-rules-parse-results><span class=secno>8.1.4.9</span> Speculation rules parse results</a></ol><li><a href=webappapis.html#module-specifier-resolution><span class=secno>8.1.5</span> Module specifier resolution</a><ol><li><a href=webappapis.html#the-resolution-algorithm><span class=secno>8.1.5.1</span> The resolution algorithm</a><li><a href=webappapis.html#import-maps><span class=secno>8.1.5.2</span> Import maps</a><li><a href=webappapis.html#import-map-processing-model><span class=secno>8.1.5.3</span> Import map processing model</a></ol><li><a href=webappapis.html#javascript-specification-host-hooks><span class=secno>8.1.6</span> JavaScript specification host hooks</a><ol><li><a href=webappapis.html#the-hostensurecanaddprivateelement-implementation><span class=secno>8.1.6.1</span> HostEnsureCanAddPrivateElement(<var>O</var>)</a><li><a href=webappapis.html#hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg)><span class=secno>8.1.6.2</span> HostEnsureCanCompileStrings(<var>realm</var>,
  <var>parameterStrings</var>, <var>bodyString</var>, <var>codeString</var>, <var>compilationType</var>,
  <var>parameterArgs</var>, <var>bodyArg</var>)</a><li><a href=webappapis.html#hostgetcodeforeval(argument)><span class=secno>8.1.6.3</span> HostGetCodeForEval(<var>argument</var>)</a><li><a href=webappapis.html#the-hostpromiserejectiontracker-implementation><span class=secno>8.1.6.4</span> HostPromiseRejectionTracker(<var>promise</var>, <var>operation</var>)</a><li><a href=webappapis.html#hostsystemutcepochnanoseconds><span class=secno>8.1.6.5</span> HostSystemUTCEpochNanoseconds(<var>global</var>)</a><li><a href=webappapis.html#integration-with-javascript-jobs><span class=secno>8.1.6.6</span> Job-related host hooks</a><ol><li><a href=webappapis.html#hostcalljobcallback><span class=secno>8.1.6.6.1</span> HostCallJobCallback(<var>callback</var>, <var>V</var>,
  <var>argumentsList</var>)</a><li><a href=webappapis.html#hostenqueuefinalizationregistrycleanupjob><span class=secno>8.1.6.6.2</span> HostEnqueueFinalizationRegistryCleanupJob(<var>finalizationRegistry</var>)</a><li><a href=webappapis.html#hostenqueuegenericjob><span class=secno>8.1.6.6.3</span> HostEnqueueGenericJob(<var>job</var>,
  <var>realm</var>)</a><li><a href=webappapis.html#hostenqueuepromisejob><span class=secno>8.1.6.6.4</span> HostEnqueuePromiseJob(<var>job</var>,
  <var>realm</var>)</a><li><a href=webappapis.html#hostenqueuetimeoutjob><span class=secno>8.1.6.6.5</span> HostEnqueueTimeoutJob(<var>job</var>, <var>realm</var>,
  <var>milliseconds</var>)</a><li><a href=webappapis.html#hostmakejobcallback><span class=secno>8.1.6.6.6</span> HostMakeJobCallback(<var>callable</var>)</a></ol><li><a href=webappapis.html#integration-with-the-javascript-module-system><span class=secno>8.1.6.7</span> Module-related host hooks</a><ol><li><a href=webappapis.html#hostgetimportmetaproperties><span class=secno>8.1.6.7.1</span> HostGetImportMetaProperties(<var>moduleRecord</var>)</a><li><a href=webappapis.html#hostgetsupportedimportattributes><span class=secno>8.1.6.7.2</span> HostGetSupportedImportAttributes()</a><li><a href=webappapis.html#hostloadimportedmodule><span class=secno>8.1.6.7.3</span> HostLoadImportedModule(<var>referrer</var>,
  <var>moduleRequest</var>, <var>loadState</var>, <var>payload</var>)</a></ol></ol><li><a href=webappapis.html#event-loops><span class=secno>8.1.7</span> Event loops</a><ol><li><a href=webappapis.html#definitions-3><span class=secno>8.1.7.1</span> Definitions</a><li><a href=webappapis.html#queuing-tasks><span class=secno>8.1.7.2</span> Queuing tasks</a><li><a href=webappapis.html#event-loop-processing-model><span class=secno>8.1.7.3</span> Processing model</a><li><a href=webappapis.html#generic-task-sources><span class=secno>8.1.7.4</span> Generic task sources</a><li><a href=webappapis.html#event-loop-for-spec-authors><span class=secno>8.1.7.5</span> Dealing with the event loop from other specifications</a></ol><li><a href=webappapis.html#events><span class=secno>8.1.8</span> Events</a><ol><li><a href=webappapis.html#event-handler-attributes><span class=secno>8.1.8.1</span> Event handlers</a><li><a href=webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects><span class=secno>8.1.8.2</span> Event handlers on elements, <code>Document</code> objects, and <code>Window</code> objects</a><ol><li><a href=webappapis.html#idl-definitions><span class=secno>8.1.8.2.1</span> IDL definitions</a></ol><li><a href=webappapis.html#event-firing><span class=secno>8.1.8.3</span> Event firing</a></ol></ol><li><a href=webappapis.html#windoworworkerglobalscope-mixin><span class=secno>8.2</span> The <code>WindowOrWorkerGlobalScope</code> mixin</a><li><a href=webappapis.html#atob><span class=secno>8.3</span> Base64 utility methods</a></ol></ol><h2 id=webappapis><span class=secno>8</span> Web application APIs<a href=#webappapis class=self-link></a></h2>

  <h3 id=scripting><span class=secno>8.1</span> Scripting<a href=#scripting class=self-link></a></h3>

  <h4 id=introduction-11><span class=secno>8.1.1</span> Introduction<a href=#introduction-11 class=self-link></a></h4>

  <p>Various mechanisms can cause author-provided executable code to run in the context of a
  document. These mechanisms include, but are probably not limited to:</p>

  <ul><li>Processing of <code id=introduction-11:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements.<li>Navigating to <a href=browsing-the-web.html#the-javascript:-url-special-case id=introduction-11:the-javascript:-url-special-case><code>javascript:</code> URLs</a>.<li>Event handlers, whether registered through the DOM using <code>addEventListener()</code>, by explicit <a href=#event-handler-content-attributes id=introduction-11:event-handler-content-attributes>event handler content attributes</a>, by
   <a href=#event-handler-idl-attributes id=introduction-11:event-handler-idl-attributes>event handler IDL attributes</a>, or otherwise.<li>Processing of technologies like SVG that have their own scripting features.</ul>

  <h4 id=agents-and-agent-clusters><span class=secno>8.1.2</span> Agents and agent clusters<a href=#agents-and-agent-clusters class=self-link></a></h4>

  <h5 id=integration-with-the-javascript-agent-formalism><span class=secno>8.1.2.1</span> Integration with the JavaScript agent formalism<a href=#integration-with-the-javascript-agent-formalism class=self-link></a></h5>

  <p>JavaScript defines the concept of an <a id=integration-with-the-javascript-agent-formalism:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a>. This section gives the mapping of that
  language-level concept on to the web platform.</p>

  <div class=note>
   <p>Conceptually, the <a id=integration-with-the-javascript-agent-formalism:agent-2 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> concept is an architecture-independent, idealized
   "thread" in which JavaScript code runs. Such code can involve multiple globals/<a href=#concept-global-object-realm id=integration-with-the-javascript-agent-formalism:concept-global-object-realm>realms</a> that can synchronously access each other, and
   thus needs to run in a single execution thread.</p>

   <p>Two <code id=integration-with-the-javascript-agent-formalism:window><a href=nav-history-apis.html#window>Window</a></code> objects having the same <a id=integration-with-the-javascript-agent-formalism:agent-3 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> does not indicate
   they can directly access all objects created in each other's realms. They would have to be
   <a id=integration-with-the-javascript-agent-formalism:same-origin-domain href=browsers.html#same-origin-domain>same origin-domain</a>; see <a id=integration-with-the-javascript-agent-formalism:isplatformobjectsameorigin-(-o-) href=nav-history-apis.html#isplatformobjectsameorigin-(-o-)>IsPlatformObjectSameOrigin</a>.</p>
  </div>

  <p>The following types of agents exist on the web platform:</p>

  <dl><dt><dfn id=similar-origin-window-agent data-export="">Similar-origin window agent</dfn><dd>
    <p>Contains various <code id=integration-with-the-javascript-agent-formalism:window-2><a href=nav-history-apis.html#window>Window</a></code> objects which can potentially reach each other, either
    directly or by using <code id=integration-with-the-javascript-agent-formalism:dom-document-domain><a href=browsers.html#dom-document-domain>document.domain</a></code>.</p>

    <p>If the encompassing <a id=integration-with-the-javascript-agent-formalism:agent-cluster href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>'s <a href=#is-origin-keyed id=integration-with-the-javascript-agent-formalism:is-origin-keyed>is origin-keyed</a> is true, then
    all the <code id=integration-with-the-javascript-agent-formalism:window-3><a href=nav-history-apis.html#window>Window</a></code> objects will be <a id=integration-with-the-javascript-agent-formalism:same-origin href=browsers.html#same-origin>same origin</a>, can reach each other
    directly, and <code id=integration-with-the-javascript-agent-formalism:dom-document-domain-2><a href=browsers.html#dom-document-domain>document.domain</a></code> will no-op.</p>

    <p class=note>Two <code id=integration-with-the-javascript-agent-formalism:window-4><a href=nav-history-apis.html#window>Window</a></code> objects that are <a id=integration-with-the-javascript-agent-formalism:same-origin-2 href=browsers.html#same-origin>same origin</a> can be in
    different <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-formalism:similar-origin-window-agent>similar-origin window agents</a>, for
    instance if they are each in their own <a id=integration-with-the-javascript-agent-formalism:browsing-context-group href=document-sequences.html#browsing-context-group>browsing context group</a>.</p>
   <dt><dfn id=dedicated-worker-agent data-export="">Dedicated worker agent</dfn><dd><p>Contains a single <code id=integration-with-the-javascript-agent-formalism:dedicatedworkerglobalscope><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>.<dt><dfn id=shared-worker-agent data-export="">Shared worker agent</dfn><dd><p>Contains a single <code id=integration-with-the-javascript-agent-formalism:sharedworkerglobalscope><a href=workers.html#sharedworkerglobalscope>SharedWorkerGlobalScope</a></code>.<dt><dfn id=service-worker-agent data-export="">Service worker agent</dfn><dd><p>Contains a single <code id=integration-with-the-javascript-agent-formalism:serviceworkerglobalscope><a data-x-internal=serviceworkerglobalscope href=https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope>ServiceWorkerGlobalScope</a></code>.<dt><dfn id=worklet-agent data-export="">Worklet agent</dfn><dd>
    <p>Contains a single <code id=integration-with-the-javascript-agent-formalism:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code> object.</p>

    <p class=note>Although a given worklet can have multiple realms, each such realm needs its own
    agent, as each realm can be executing code independently and at the same time as the others.</p>
   </dl>

  <p>Only <a href=#shared-worker-agent id=integration-with-the-javascript-agent-formalism:shared-worker-agent>shared</a> and <a href=#dedicated-worker-agent id=integration-with-the-javascript-agent-formalism:dedicated-worker-agent>dedicated worker agents</a> allow the use of JavaScript <code id=integration-with-the-javascript-agent-formalism:atomics><a data-x-internal=atomics href=https://tc39.es/ecma262/#sec-atomics-object>Atomics</a></code> APIs to
  potentially <a href=https://tc39.es/ecma262/#sec-forward-progress id=integration-with-the-javascript-agent-formalism:forward-progress data-x-internal=forward-progress>block</a>.</p>

  

  <p>To <dfn id=create-an-agent>create an agent</dfn>, given a boolean <var>canBlock</var>:</p>

  <ol><li><p>Let <var>signifier</var> be a new unique internal value.<li><p>Let <var>candidateExecution</var> be a new <a id=integration-with-the-javascript-agent-formalism:candidate-execution href=https://tc39.es/ecma262/#sec-candidate-executions data-x-internal=candidate-execution>candidate execution</a>.<li><p>Let <var>agent</var> be a new <a id=integration-with-the-javascript-agent-formalism:agent-4 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> whose [[CanBlock]] is
   <var>canBlock</var>, [[Signifier]] is <var>signifier</var>, [[CandidateExecution]] is
   <var>candidateExecution</var>, and [[IsLockFree1]], [[IsLockFree2]], and [[LittleEndian]] are set
   at the implementation's discretion.<li><p>Set <var>agent</var>'s <a href=#concept-agent-event-loop id=integration-with-the-javascript-agent-formalism:concept-agent-event-loop>event loop</a> to a new
   <a href=#event-loop id=integration-with-the-javascript-agent-formalism:event-loop>event loop</a>.<li><p>Return <var>agent</var>.</ol>

  <p>For a <a id=integration-with-the-javascript-agent-formalism:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> <var>realm</var>, the <a id=integration-with-the-javascript-agent-formalism:agent-5 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> whose [[Signifier]] is
  <var>realm</var>.[[AgentSignifier]] is <dfn data-dfn-for=realm id="realm's-agent" data-lt=agent data-export="">the realm's agent</dfn>.</p>

  <p>The <dfn id=relevant-agent data-export="">relevant agent</dfn> for a <a id=integration-with-the-javascript-agent-formalism:platform-object href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a>
  <var>platformObject</var> is <var>platformObject</var>'s <a href=#concept-relevant-realm id=integration-with-the-javascript-agent-formalism:concept-relevant-realm>relevant realm</a>'s <a href="#realm's-agent" id="integration-with-the-javascript-agent-formalism:realm's-agent">agent</a>.</p>

  <p class=note>The agent equivalent of the <a id=integration-with-the-javascript-agent-formalism:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a> is the <a id=integration-with-the-javascript-agent-formalism:surrounding-agent href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding
  agent</a>.</p>

  

  <h5 id=integration-with-the-javascript-agent-cluster-formalism><span class=secno>8.1.2.2</span> Integration with the JavaScript agent cluster formalism<a href=#integration-with-the-javascript-agent-cluster-formalism class=self-link></a></h5>

  <p>JavaScript also defines the concept of an <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>, which this standard maps
  to the web platform by placing agents appropriately when they are created using the
  <a href=#obtain-similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:obtain-similar-origin-window-agent>obtain a similar-origin window agent</a> or
  <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent>obtain a worker/worklet agent</a>
  algorithms.</p>

  <p>The <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-2 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> concept is crucial for defining the JavaScript memory model, and
  in particular among which <a href=https://tc39.es/ecma262/#sec-agents id=integration-with-the-javascript-agent-cluster-formalism:agent data-x-internal=agent>agents</a> the backing data of
  <code id=integration-with-the-javascript-agent-cluster-formalism:sharedarraybuffer><a data-x-internal=sharedarraybuffer href=https://tc39.es/ecma262/#sec-sharedarraybuffer-objects>SharedArrayBuffer</a></code> objects can be shared.</p>

  <p class=note>Conceptually, the <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-3 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> concept is an
  architecture-independent, idealized "process boundary" that groups together multiple "threads"
  (<a href=https://tc39.es/ecma262/#sec-agents id=integration-with-the-javascript-agent-cluster-formalism:agent-2 data-x-internal=agent>agents</a>). The <a href=https://tc39.es/ecma262/#sec-agent-clusters id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-4 data-x-internal=agent-cluster>agent clusters</a>
  defined by the specification are generally more restrictive than the actual process boundaries
  implemented in user agents. By enforcing these idealized divisions at the specification level, we
  ensure that web developers see interoperable behavior with regard to shared memory, even in the
  face of varying and changing user agent process models.</p>

  

  <p>An <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-5 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> has an associated <dfn id=agent-cluster-cross-origin-isolation>cross-origin isolation mode</dfn>, which is a
  <a id=integration-with-the-javascript-agent-cluster-formalism:cross-origin-isolation-mode href=document-sequences.html#cross-origin-isolation-mode>cross-origin isolation mode</a>. It is initially "<code id=integration-with-the-javascript-agent-cluster-formalism:cross-origin-isolation-none><a href=document-sequences.html#cross-origin-isolation-none>none</a></code>".</p>

  <p>An <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-6 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> has an associated <dfn id=is-origin-keyed>is origin-keyed</dfn> (a boolean), which
  is initially false.</p>

  <hr>

  <p>The following defines the allocation of the <a href=https://tc39.es/ecma262/#sec-agent-clusters id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-7 data-x-internal=agent-cluster>agent clusters</a>
  of <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:similar-origin-window-agent>similar-origin window agents</a>.</p>

  <p>An <dfn id=agent-cluster-key>agent cluster key</dfn> is a <a id=integration-with-the-javascript-agent-cluster-formalism:site href=browsers.html#site>site</a> or <a href=browsers.html#concept-origin-tuple id=integration-with-the-javascript-agent-cluster-formalism:concept-origin-tuple>tuple origin</a>. Without web developer action to achieve <a href=browsers.html#origin-keyed-agent-clusters>origin-keyed agent clusters</a>, it will be a
  <a id=integration-with-the-javascript-agent-cluster-formalism:site-2 href=browsers.html#site>site</a>.</p>

  <p class=note>An equivalent formulation is that an <a href=#agent-cluster-key id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-key>agent cluster key</a> can be a
  <a id=integration-with-the-javascript-agent-cluster-formalism:scheme-and-host href=browsers.html#scheme-and-host>scheme-and-host</a> or an <a id=integration-with-the-javascript-agent-cluster-formalism:concept-origin href=browsers.html#concept-origin>origin</a>.</p>

  <p>To <dfn id=obtain-similar-origin-window-agent>obtain a similar-origin window agent</dfn>,
  given an <a id=integration-with-the-javascript-agent-cluster-formalism:concept-origin-2 href=browsers.html#concept-origin>origin</a> <var>origin</var>, a <a id=integration-with-the-javascript-agent-cluster-formalism:browsing-context-group href=document-sequences.html#browsing-context-group>browsing context group</a>
  <var>group</var>, and a boolean <var>requestsOAC</var>, run these steps:</p>

  <ol><li><p>Let <var>site</var> be the result of <a href=browsers.html#obtain-a-site id=integration-with-the-javascript-agent-cluster-formalism:obtain-a-site>obtaining a site</a>
   with <var>origin</var>.<li><p>Let <var>key</var> be <var>site</var>.<li><p>If <var>group</var>'s <a href=document-sequences.html#bcg-cross-origin-isolation id=integration-with-the-javascript-agent-cluster-formalism:bcg-cross-origin-isolation>cross-origin isolation
   mode</a> is not "<code id=integration-with-the-javascript-agent-cluster-formalism:cross-origin-isolation-none-2><a href=document-sequences.html#cross-origin-isolation-none>none</a></code>", then set
   <var>key</var> to <var>origin</var>.<li><p>Otherwise, if <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:historical-agent-cluster-key-map href=document-sequences.html#historical-agent-cluster-key-map>historical agent cluster key
   map</a>[<var>origin</var>] <a href=https://infra.spec.whatwg.org/#map-exists id=integration-with-the-javascript-agent-cluster-formalism:map-exists data-x-internal=map-exists>exists</a>, then set <var>key</var> to
   <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:historical-agent-cluster-key-map-2 href=document-sequences.html#historical-agent-cluster-key-map>historical agent cluster key map</a>[<var>origin</var>].<li>
    <p>Otherwise:</p>

    <ol><li><p>If <var>requestsOAC</var> is true, then set <var>key</var> to
     <var>origin</var>.<li><p>Set <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:historical-agent-cluster-key-map-3 href=document-sequences.html#historical-agent-cluster-key-map>historical agent cluster key map</a>[<var>origin</var>]
     to <var>key</var>.</ol>
   <li>
    <p>If <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-map href=document-sequences.html#agent-cluster-map>agent cluster map</a>[<var>key</var>] <a href=https://infra.spec.whatwg.org/#map-exists id=integration-with-the-javascript-agent-cluster-formalism:map-exists-2 data-x-internal=map-exists>does not exist</a>, then:</p>

    <ol><li><p>Let <var>agentCluster</var> be a new <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-8 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>.<li><p>Set <var>agentCluster</var>'s <a href=#agent-cluster-cross-origin-isolation id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-cross-origin-isolation>cross-origin isolation mode</a> to
     <var>group</var>'s <a href=document-sequences.html#bcg-cross-origin-isolation id=integration-with-the-javascript-agent-cluster-formalism:bcg-cross-origin-isolation-2>cross-origin isolation
     mode</a>.<li>
      <p>If <var>key</var> is an <a id=integration-with-the-javascript-agent-cluster-formalism:concept-origin-3 href=browsers.html#concept-origin>origin</a>:</p>

      <ol><li><p><a id=integration-with-the-javascript-agent-cluster-formalism:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>key</var> is <var>origin</var>.<li><p>Set <var>agentCluster</var>'s <a href=#is-origin-keyed id=integration-with-the-javascript-agent-cluster-formalism:is-origin-keyed>is origin-keyed</a> to true.</ol>
     <li><p>Add the result of <a href=#create-an-agent id=integration-with-the-javascript-agent-cluster-formalism:create-an-agent>creating an agent</a>, given false,
     to <var>agentCluster</var>.<li><p>Set <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-map-2 href=document-sequences.html#agent-cluster-map>agent cluster map</a>[<var>key</var>] to
     <var>agentCluster</var>.</ol>
   <li><p>Return the single <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:similar-origin-window-agent-2>similar-origin window agent</a> contained in <var>group</var>'s
   <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-map-3 href=document-sequences.html#agent-cluster-map>agent cluster map</a>[<var>key</var>].</ol>

  <p class=note>This means that there is only one <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:similar-origin-window-agent-3>similar-origin window agent</a> per
  browsing context agent cluster. (However, <a href=#dedicated-worker-agent id=integration-with-the-javascript-agent-cluster-formalism:dedicated-worker-agent>dedicated
  worker</a> and <a href=#worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:worklet-agent>worklet agents</a> might be in the same
  cluster.)</p>

  <hr>

  <p>The following defines the allocation of the <a href=https://tc39.es/ecma262/#sec-agent-clusters id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-9 data-x-internal=agent-cluster>agent clusters</a>
  of all other types of agents.</p>

  <p>To <dfn id=obtaining-a-worker/worklet-agent>obtain a worker/worklet agent</dfn>, given an
  <a href=#environment-settings-object id=integration-with-the-javascript-agent-cluster-formalism:environment-settings-object>environment settings object</a> or null <var>outside settings</var>, a boolean
  <var>isTopLevel</var>, and a boolean <var>canBlock</var>, run these steps:</p>

  <ol><li><p>Let <var>agentCluster</var> be null.

   <li>
    <p>If <var>isTopLevel</var> is true, then:</p>

    <ol><li><p>Set <var>agentCluster</var> to a new <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-10 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>.<li>
      <p>Set <var>agentCluster</var>'s <a href=#is-origin-keyed id=integration-with-the-javascript-agent-cluster-formalism:is-origin-keyed-2>is origin-keyed</a> to true.</p>

      <p class=note>These workers can be considered to be origin-keyed. However, this is not
      exposed through any APIs (in the way that <code id=integration-with-the-javascript-agent-cluster-formalism:dom-originagentcluster><a href=browsers.html#dom-originagentcluster>originAgentCluster</a></code> exposes the origin-keyedness for
      windows).</p>
     </ol>
   <li>
    <p>Otherwise:</p>

    <ol><li><p><a id=integration-with-the-javascript-agent-cluster-formalism:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>outside settings</var> is not null.<li><p>Let <var>ownerAgent</var> be <var>outside settings</var>'s <a href="#environment-settings-object's-realm" id="integration-with-the-javascript-agent-cluster-formalism:environment-settings-object's-realm">realm</a>'s <a href="#realm's-agent" id="integration-with-the-javascript-agent-cluster-formalism:realm's-agent">agent</a>.<li><p>Set <var>agentCluster</var> to the agent cluster which contains
     <var>ownerAgent</var>.</ol>
   <li><p>Let <var>agent</var> be the result of <a href=#create-an-agent id=integration-with-the-javascript-agent-cluster-formalism:create-an-agent-2>creating an
   agent</a> given <var>canBlock</var>.<li><p>Add <var>agent</var> to <var>agentCluster</var>.<li><p>Return <var>agent</var>.</ol>

  <p>To <dfn id=obtain-a-dedicated/shared-worker-agent>obtain a dedicated/shared worker agent</dfn>, given an <a href=#environment-settings-object id=integration-with-the-javascript-agent-cluster-formalism:environment-settings-object-2>environment settings
  object</a> <var>outside settings</var> and a boolean <var>isShared</var>, return the result of
  <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent-2>obtaining a worker/worklet agent</a> given <var>outside settings</var>,
  <var>isShared</var>, and true.</p>

  <p>To <dfn id=obtain-a-worklet-agent>obtain a worklet agent</dfn>, given an <a href=#environment-settings-object id=integration-with-the-javascript-agent-cluster-formalism:environment-settings-object-3>environment settings object</a>
  <var>outside settings</var>, return the result of <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent-3>obtaining a worker/worklet agent</a>
  given <var>outside settings</var>, false, and false.</p>

  <p>To <dfn id=obtain-a-service-worker-agent data-export="">obtain a service worker agent</dfn>, return the result of <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent-4>obtaining a
  worker/worklet agent</a> given null, true, and false.</p>

  <hr>

  

  <div id=can-share-memory-with class=example><a href=#can-share-memory-with class=self-link></a>
   <p>The following pairs of global objects are each within the same <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-11 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>, and
   thus can use <code id=integration-with-the-javascript-agent-cluster-formalism:sharedarraybuffer-2><a data-x-internal=sharedarraybuffer href=https://tc39.es/ecma262/#sec-sharedarraybuffer-objects>SharedArrayBuffer</a></code> instances to share memory with each other:</p>

   <ul><li><p>A <code id=integration-with-the-javascript-agent-cluster-formalism:window><a href=nav-history-apis.html#window>Window</a></code> object and a dedicated worker that it created.<li><p>A worker (of any type) and a dedicated worker it created.<li><p>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-2><a href=nav-history-apis.html#window>Window</a></code> object <var>A</var> and the <code id=integration-with-the-javascript-agent-cluster-formalism:window-3><a href=nav-history-apis.html#window>Window</a></code> object of an
    <code id=integration-with-the-javascript-agent-cluster-formalism:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element that <var>A</var> created that could be <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin-domain href=browsers.html#same-origin-domain>same
    origin-domain</a> with <var>A</var>.<li><p>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-4><a href=nav-history-apis.html#window>Window</a></code> object and a <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin-domain-2 href=browsers.html#same-origin-domain>same origin-domain</a> <code id=integration-with-the-javascript-agent-cluster-formalism:window-5><a href=nav-history-apis.html#window>Window</a></code>
    object that opened it.<li><p>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-6><a href=nav-history-apis.html#window>Window</a></code> object and a worklet that it created.</ul>

   <p>The following pairs of global objects are <em>not</em> within the same <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-12 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent
   cluster</a>, and thus cannot share memory:</p>

   <ul><li><p>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-7><a href=nav-history-apis.html#window>Window</a></code> object and a shared worker it created.<li><p>A worker (of any type) and a shared worker it created.<li><p>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-8><a href=nav-history-apis.html#window>Window</a></code> object and a service worker it created.<li><p>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-9><a href=nav-history-apis.html#window>Window</a></code> object <var>A</var> and the <code id=integration-with-the-javascript-agent-cluster-formalism:window-10><a href=nav-history-apis.html#window>Window</a></code> object of an
    <code id=integration-with-the-javascript-agent-cluster-formalism:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element that <var>A</var> created that cannot be <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin-domain-3 href=browsers.html#same-origin-domain>same
    origin-domain</a> with <var>A</var>.<li><p>Any two <code id=integration-with-the-javascript-agent-cluster-formalism:window-11><a href=nav-history-apis.html#window>Window</a></code> objects with no opener or ancestor relationship. This holds
    even if the two <code id=integration-with-the-javascript-agent-cluster-formalism:window-12><a href=nav-history-apis.html#window>Window</a></code> objects are <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin href=browsers.html#same-origin>same origin</a>.</ul>
  </div>

  

  <h4 id=realms-and-their-counterparts><span class=secno>8.1.3</span> Realms and their counterparts<a href=#realms-and-their-counterparts class=self-link></a></h4>

  <p>The JavaScript specification introduces the <a id=realms-and-their-counterparts:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> concept, representing a global
  environment in which script is run. Each realm comes with an <a id=realms-and-their-counterparts:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>
  <a href=#global-object id=realms-and-their-counterparts:global-object>global object</a>; much of this specification is devoted to defining that global object
  and its properties.</p>

  <p>For web specifications, it is often useful to associate values or algorithms with a
  realm/global object pair. When the values are specific to a particular type of realm, they are
  associated directly with the global object in question, e.g., in the definition of the
  <code id=realms-and-their-counterparts:window><a href=nav-history-apis.html#window>Window</a></code> or <code id=realms-and-their-counterparts:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code> interfaces. When the values have utility
  across multiple realms, we use the <a href=#environment-settings-object id=realms-and-their-counterparts:environment-settings-object>environment settings object</a> concept.</p>

  <p>Finally, in some cases it is necessary to track associated values before a
  realm/global object/environment settings object even comes into existence (for example, during
  <a href=browsing-the-web.html#navigate id=realms-and-their-counterparts:navigate>navigation</a>). These values are tracked in the
  <a href=#environment id=realms-and-their-counterparts:environment>environment</a> concept.</p>

  <h5 id=environments><span class=secno>8.1.3.1</span> Environments<a href=#environments class=self-link></a></h5>

  <p>An <dfn id=environment data-export="">environment</dfn> is an object that identifies the settings of a current or
  potential execution environment (i.e., a <a href=browsing-the-web.html#navigation-params id=environments:navigation-params>navigation
  params</a>'s <a href=browsing-the-web.html#navigation-params-reserved-environment id=environments:navigation-params-reserved-environment>reserved environment</a>
  or a <a href=https://fetch.spec.whatwg.org/#concept-request id=environments:concept-request data-x-internal=concept-request>request</a>'s <a href=https://fetch.spec.whatwg.org/#concept-request-reserved-client id=environments:concept-request-reserved-client data-x-internal=concept-request-reserved-client>reserved client</a>). An <a href=#environment id=environments:environment>environment</a> has
  the following fields:</p>

  <dl><dt>An <dfn data-dfn-for=environment id=concept-environment-id data-export="">id</dfn><dd><p>An opaque string that uniquely identifies this <a href=#environment id=environments:environment-2>environment</a>.<dt>A <dfn data-dfn-for=environment id=concept-environment-creation-url data-export="">creation URL</dfn><dd>
    <p>A <a id=environments:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> that represents the location of the resource with which this
    <a href=#environment id=environments:environment-3>environment</a> is associated.</p>

    <p class=note>In the case of a <code id=environments:window><a href=nav-history-apis.html#window>Window</a></code> <a href=#environment-settings-object id=environments:environment-settings-object>environment settings object</a>,
    this URL might be distinct from its <a href=#concept-settings-object-global id=environments:concept-settings-object-global>global
    object</a>'s <a href=nav-history-apis.html#concept-document-window id=environments:concept-document-window>associated
    <code>Document</code></a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="environments:the-document's-address" data-x-internal="the-document's-address">URL</a>, due to
    mechanisms such as <code id=environments:dom-history-pushstate><a href=nav-history-apis.html#dom-history-pushstate>history.pushState()</a></code> which modify
    the latter.</p>
   <dt>A <dfn data-dfn-for=environment id=concept-environment-top-level-creation-url data-export="">top-level creation URL</dfn><dd><p>Null or a <a id=environments:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> that represents the <a href=#concept-environment-creation-url id=environments:concept-environment-creation-url>creation URL</a> of the "top-level"
   <a href=#environment id=environments:environment-4>environment</a>. It is null for workers and worklets.<dt>A <dfn data-dfn-for=environment id=concept-environment-top-level-origin data-export="">top-level origin</dfn><dd>
    <p>A <span class=XXX>for now</span> <a id=environments:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> value, null,
    or an <a id=environments:concept-origin href=browsers.html#concept-origin>origin</a>. For a "top-level" potential execution environment it is null (i.e.,
    when there is no response yet); otherwise it is the "top-level" <a href=#environment id=environments:environment-5>environment</a>'s <a href=#concept-settings-object-origin id=environments:concept-settings-object-origin>origin</a>. For a dedicated worker or worklet it is
    the <a href=#concept-environment-top-level-origin id=environments:concept-environment-top-level-origin>top-level origin</a> of its creator. For a shared or service worker it is an
    <a id=environments:implementation-defined-2 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> value.</p>

    <p class=note>This is distinct from the <a href=#concept-environment-top-level-creation-url id=environments:concept-environment-top-level-creation-url>top-level creation URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-origin id=environments:concept-url-origin data-x-internal=concept-url-origin>origin</a> when sandboxing, workers, and worklets are
    involved.</p>
   <dt>A <dfn data-dfn-for=environment id=concept-environment-target-browsing-context data-export="">target browsing context</dfn><dd><p>Null or a target <a id=environments:browsing-context href=document-sequences.html#browsing-context>browsing context</a> for a <a href=https://fetch.spec.whatwg.org/#navigation-request id=environments:navigation-request data-x-internal=navigation-request>navigation request</a>.<dt>An <dfn data-dfn-for=environment id=concept-environment-active-service-worker data-export="">active service worker</dfn><dd><p>Null or a <a href=https://w3c.github.io/ServiceWorker/#dfn-service-worker id=environments:dfn-service-worker data-x-internal=dfn-service-worker>service worker</a> that <a href=https://w3c.github.io/ServiceWorker/#dfn-control id=environments:dfn-control data-x-internal=dfn-control>controls</a> the <a href=#environment id=environments:environment-6>environment</a>.<dt>An <dfn data-dfn-for=environment id=concept-environment-execution-ready-flag data-export="">execution ready flag</dfn><dd><p>A flag that indicates whether the environment setup is done. It is initially
   unset.</dl>

  <p>Specifications may define <dfn id=environment-discarding-steps data-export="">environment discarding steps</dfn> for environments. The
  steps take an <a href=#environment id=environments:environment-7>environment</a> as input.</p>

  <p class=note>The <a href=#environment-discarding-steps id=environments:environment-discarding-steps>environment discarding
  steps</a> are run for only a select few environments: the ones that will
  never become execution ready because, for example, they failed to load.</p>

  <h5 id=environment-settings-objects><span class=secno>8.1.3.2</span> Environment settings objects<a href=#environment-settings-objects class=self-link></a></h5>

  <p>An <dfn id=environment-settings-object data-export="">environment settings object</dfn> is an <a href=#environment id=environment-settings-objects:environment>environment</a> that
  additionally specifies algorithms for:</p>

  <dl><dt>A <dfn data-dfn-for="environment settings object" id=realm-execution-context data-export="">realm execution
   context</dfn><dd>
    <p>A <a id=environment-settings-objects:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> shared by all
    <a href=scripting.html#the-script-element id=environment-settings-objects:the-script-element>scripts</a> that use this settings object, i.e., all scripts in a given
    <a id=environment-settings-objects:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>. When we <a href=#run-a-classic-script id=environment-settings-objects:run-a-classic-script>run a classic script</a> or <a href=#run-a-module-script id=environment-settings-objects:run-a-module-script>run a module
    script</a>, this execution context becomes the top of the <a id=environment-settings-objects:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context
    stack</a>, on top of which another execution context specific to the script in question is
    pushed. (This setup ensures <a id=environment-settings-objects:source-text-module-record href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module Record</a>'s
    <a href=https://tc39.es/ecma262/#sec-moduleevaluation id=environment-settings-objects:js-evaluate data-x-internal=js-evaluate>Evaluate</a> knows which realm to use.)</p>
   <dt>A <dfn data-dfn-for="environment
   settings object" id=concept-settings-object-module-map data-export="">module map</dfn><dd>
    <p>A <a href=#module-map id=environment-settings-objects:module-map>module map</a> that is used when importing JavaScript modules.</p>
   <dt>An <dfn data-dfn-for="environment settings object" id=api-base-url data-export="">API base URL</dfn><dd>
    <p>A <a id=environment-settings-objects:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> used by APIs called by scripts that use this <a href=#environment-settings-object id=environment-settings-objects:environment-settings-object>environment settings
    object</a> to <a href=urls-and-fetching.html#parse-a-url id=environment-settings-objects:parse-a-url>parse URLs</a>.</p>
   <dt>An <dfn data-dfn-for="environment
   settings object" id=concept-settings-object-origin data-export="">origin</dfn><dd>
    <p>An <a id=environment-settings-objects:concept-origin href=browsers.html#concept-origin>origin</a> used in security checks.</p>
   <dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-has-cross-site-ancestor data-export="">has cross-site ancestor</dfn><dd><p>A boolean used in security checks.<dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-policy-container data-export="">policy container</dfn><dd>
    <p>A <a id=environment-settings-objects:policy-container href=browsers.html#policy-container>policy container</a> containing policies used for security checks.</p>
   <dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-cross-origin-isolated-capability data-export="">cross-origin isolated capability</dfn><dd><p>A boolean representing whether scripts that use this <a href=#environment-settings-object id=environment-settings-objects:environment-settings-object-2>environment settings
   object</a> are allowed to use APIs that require cross-origin isolation.<dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-time-origin data-export="">time origin</dfn><dd>A number used as the baseline for performance-related timestamps. <a href=references.html#refsHRT>[HRT]</a></dl>

  <p>An <a href=#environment-settings-object id=environment-settings-objects:environment-settings-object-3>environment settings object</a>'s <dfn data-dfn-for="environment settings
  object" id=responsible-event-loop data-export="">responsible event loop</dfn> is its <a href=#concept-settings-object-global id=environment-settings-objects:concept-settings-object-global>global
  object</a>'s <a href=#relevant-agent id=environment-settings-objects:relevant-agent>relevant agent</a>'s <a href=#concept-agent-event-loop id=environment-settings-objects:concept-agent-event-loop>event
  loop</a>.</p>

  <h5 id=realms-settings-objects-global-objects><span class=secno>8.1.3.3</span> Realms, settings objects, and global objects<a href=#realms-settings-objects-global-objects class=self-link></a></h5>

  <p>A <dfn id=global-object data-export="">global object</dfn> is a JavaScript object that is the [[GlobalObject]] field of
  a <a id=realms-settings-objects-global-objects:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>.</p>

  <p class=note>In this specification, all <a href=https://tc39.es/ecma262/#sec-code-realms id=realms-settings-objects-global-objects:realm-2 data-x-internal=realm>realms</a> are <a href=#creating-a-new-javascript-realm id=realms-settings-objects-global-objects:creating-a-new-javascript-realm>created</a> with <a href=#global-object id=realms-settings-objects-global-objects:global-object>global
  objects</a> that are either <code id=realms-settings-objects-global-objects:window><a href=nav-history-apis.html#window>Window</a></code>, <code id=realms-settings-objects-global-objects:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code>, or
  <code id=realms-settings-objects-global-objects:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code> objects.</p>

  <p>A <a href=#global-object id=realms-settings-objects-global-objects:global-object-2>global object</a> has an <dfn data-dfn-for="global object" id=in-error-reporting-mode>in error reporting mode</dfn>
  boolean, which is initially false.</p>

  <p>A <a href=#global-object id=realms-settings-objects-global-objects:global-object-3>global object</a> has an <dfn id=outstanding-rejected-promises-weak-set>outstanding rejected promises weak set</dfn>, a
  <a id=realms-settings-objects-global-objects:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <code id=realms-settings-objects-global-objects:idl-promise><a data-x-internal=idl-promise href=https://webidl.spec.whatwg.org/#idl-promise>Promise</a></code> objects, initially empty. This set
  must not create strong references to any of its members, and implementations are free to limit
  its size in an <a id=realms-settings-objects-global-objects:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner, e.g., by removing old entries from it
  when new ones are added.</p>

  <p>A <a href=#global-object id=realms-settings-objects-global-objects:global-object-4>global object</a> has an <dfn id=about-to-be-notified-rejected-promises-list>about-to-be-notified rejected promises list</dfn>, a
  <a id=realms-settings-objects-global-objects:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <code id=realms-settings-objects-global-objects:idl-promise-2><a data-x-internal=idl-promise href=https://webidl.spec.whatwg.org/#idl-promise>Promise</a></code> objects, initially empty.</p>

  <p>A <a href=#global-object id=realms-settings-objects-global-objects:global-object-5>global object</a> has an <dfn id=concept-global-import-map>import map</dfn>,
  initially an <a href=#empty-import-map id=realms-settings-objects-global-objects:empty-import-map>empty import map</a>.</p>

  <p class=note>For now, only <code id=realms-settings-objects-global-objects:window-2><a href=nav-history-apis.html#window>Window</a></code> <a href=#global-object id=realms-settings-objects-global-objects:global-object-6>global
  objects</a> have their <a href=#concept-global-import-map id=realms-settings-objects-global-objects:concept-global-import-map>import map</a> modified
  from the initial empty one. The <a href=#concept-global-import-map id=realms-settings-objects-global-objects:concept-global-import-map-2>import map</a> is
  only accessed for the resolution of a root <a href=#module-script id=realms-settings-objects-global-objects:module-script>module script</a>.</p>

  <p>A <a href=#global-object id=realms-settings-objects-global-objects:global-object-7>global object</a> has a <dfn id=resolved-module-set>resolved module set</dfn>, a <a id=realms-settings-objects-global-objects:set-2 href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a>
  of <a href=#specifier-resolution-record id=realms-settings-objects-global-objects:specifier-resolution-record>specifier resolution records</a>, initially
  empty.</p>

  <p class=note>The <a href=#resolved-module-set id=realms-settings-objects-global-objects:resolved-module-set>resolved module set</a> ensures that module specifier resolution
  returns the same result when called multiple times with the same (referrer, specifier) pair. It
  does that by ensuring that <a href=#import-map id=realms-settings-objects-global-objects:import-map>import map</a> rules that impact the specifier in its
  referrer's scope cannot be defined after its initial resolution. For now, only <code id=realms-settings-objects-global-objects:window-3><a href=nav-history-apis.html#window>Window</a></code>
  <a href=#global-object id=realms-settings-objects-global-objects:global-object-8>global objects</a> have their module set data structures modified
  from the initial empty one.</p>

  <hr>

  <p>There is always a 1-to-1-to-1 mapping between <a href=https://tc39.es/ecma262/#sec-code-realms id=realms-settings-objects-global-objects:realm-3 data-x-internal=realm>realms</a>, <a href=#global-object id=realms-settings-objects-global-objects:global-object-9>global objects</a>, and <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object>environment settings objects</a>:</p>

  <ul><li><p>A <a id=realms-settings-objects-global-objects:realm-4 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> has a [[HostDefined]] field, which contains <dfn data-dfn-for=realm id=concept-realm-settings-object data-lt="settings object" data-export="">the realm's
   settings object</dfn>.<li><p>A <a id=realms-settings-objects-global-objects:realm-5 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> has a [[GlobalObject]] field, which contains <dfn data-dfn-for=realm id=concept-realm-global data-lt="global object" data-export="">the realm's global
   object</dfn>.<li><p>Each <a href=#global-object id=realms-settings-objects-global-objects:global-object-10>global object</a> in this specification is created during the <a href=#creating-a-new-javascript-realm id=realms-settings-objects-global-objects:creating-a-new-javascript-realm-2>creation</a> of a corresponding <a id=realms-settings-objects-global-objects:realm-6 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>, known as
   <dfn data-dfn-for="global object" id=concept-global-object-realm data-lt=realm data-export="">the global
   object's realm</dfn>.<li id=relevant-settings-object-for-a-global-object><p>Each <a href=#global-object id=realms-settings-objects-global-objects:global-object-11>global object</a> in this
   specification is created alongside a corresponding <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-2>environment settings object</a>,
   known as its <a href=#relevant-settings-object id=realms-settings-objects-global-objects:relevant-settings-object>relevant settings object</a>.</p>

   <li><p>An <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-3>environment settings object</a>'s <a href=#realm-execution-context id=realms-settings-objects-global-objects:realm-execution-context>realm execution context</a>'s
   Realm component is <dfn data-dfn-for="environment settings object" id="environment-settings-object's-realm" data-lt=realm data-export="">the environment settings object's realm</dfn>.<li><p>An <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-4>environment settings object</a>'s <a href="#environment-settings-object's-realm" id="realms-settings-objects-global-objects:environment-settings-object's-realm">realm</a> then has a [[GlobalObject]] field, which contains <dfn data-dfn-for="environment settings
   object" id=concept-settings-object-global data-lt="global object" data-export="">the environment settings object's global object</dfn>.</ul>

  <p>To <dfn id=creating-a-new-javascript-realm data-export="">create a new
  realm</dfn> in an <a id=realms-settings-objects-global-objects:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> <var>agent</var>, optionally with instructions to create a
  global object or a global <b>this</b> binding (or both), the following steps are taken:</p>

  <ol><li><p>Perform <a href=https://tc39.es/ecma262/#sec-initializehostdefinedrealm id=realms-settings-objects-global-objects:js-initializehostdefinedrealm data-x-internal=js-initializehostdefinedrealm>InitializeHostDefinedRealm</a>()
   with the provided customizations for creating the global object and the global <b>this</b>
   binding.<li>
    <p>Let <var>realm execution context</var> be the <a id=realms-settings-objects-global-objects:running-javascript-execution-context href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution
    context</a>.</p>

    <p class=note>This is the <a id=realms-settings-objects-global-objects:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> created in the previous
    step.</p>
   <li><p>Remove <var>realm execution context</var> from the <a id=realms-settings-objects-global-objects:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context
   stack</a>.<li><p>Let <var>realm</var> be <var>realm execution context</var>'s Realm component.<li>
    <p>If <var>agent</var>'s <a id=realms-settings-objects-global-objects:agent-cluster href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>'s <a href=#agent-cluster-cross-origin-isolation id=realms-settings-objects-global-objects:agent-cluster-cross-origin-isolation>cross-origin isolation mode</a> is "<code id=realms-settings-objects-global-objects:cross-origin-isolation-none><a href=document-sequences.html#cross-origin-isolation-none>none</a></code>", then:</p>

    <ol><li><p>Let <var>global</var> be <var>realm</var>'s <a href=#concept-realm-global id=realms-settings-objects-global-objects:concept-realm-global>global
     object</a>.<li><p>Let <var>status</var> be ! <var>global</var>.[[Delete]]("<code>SharedArrayBuffer</code>").<li><p><a id=realms-settings-objects-global-objects:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>status</var> is true.</ol>

    <p class=note>This is done for compatibility with web content and there is some hope that this
    can be removed in the future. Web developers can still get at the constructor through
    <code class=js>new WebAssembly.Memory({ shared:true, initial:0, maximum:0
    }).buffer.constructor</code>.</p>
   <li><p>Return <var>realm execution context</var>.</ol>

  <hr>

  <p>When defining algorithm steps throughout this specification, it is often important to indicate
  what <a id=realms-settings-objects-global-objects:realm-7 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> is to be used—or, equivalently, what <a href=#global-object id=realms-settings-objects-global-objects:global-object-12>global object</a> or
  <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-5>environment settings object</a> is to be used. In general, there are at least four
  possibilities:</p>

  <dl><dt><dfn id=concept-entry-everything>Entry</dfn><dd>This corresponds to the script that initiated the currently running script action: i.e.,
    the function or script that the user agent called into when it called into author code.<dt><dfn id=concept-incumbent-everything>Incumbent</dfn><dd>This corresponds to the most-recently-entered author function or script on the stack, or the
    author function or script that originally scheduled the currently-running callback.<dt><dfn id=concept-current-everything>Current</dfn><dd>This corresponds to the currently-running function object, including built-in user-agent
    functions which might not be implemented as JavaScript. (It is derived from the <a id=realms-settings-objects-global-objects:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current
    realm</a>.)<dt><dfn id=concept-relevant-everything>Relevant</dfn><dd>Every <a id=realms-settings-objects-global-objects:platform-object href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> has a <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm>relevant
    realm</a>, which is roughly the <a id=realms-settings-objects-global-objects:realm-8 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> in which it was created. When writing
    algorithms, the most prominent <a id=realms-settings-objects-global-objects:platform-object-2 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> whose <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-2>relevant realm</a> might be important is the <b>this</b>
    value of the currently-running function object. In some cases, there can be other important
    <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-3>relevant realms</a>, such as those of any
    arguments.</dl>

  <p>Note how the <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything>entry</a>, <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything>incumbent</a>, and <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything>current</a> concepts are usable without qualification,
  whereas the <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything>relevant</a> concept must be applied to
  a particular <a id=realms-settings-objects-global-objects:platform-object-3 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a>.</p>

  <p class=warning>The <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything-2>incumbent</a> and <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything-2>entry</a> concepts should not be used by new specifications,
  as they are excessively complicated and unintuitive to work with. We are working to remove almost
  all existing uses from the platform: see <a href=https://github.com/whatwg/html/issues/1430>issue #1430</a> for <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything-3>incumbent</a>, and <a href=https://github.com/whatwg/html/issues/1431>issue #1431</a> for <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything-3>entry</a>.</p>

  <p>In general, web platform specifications should use the <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything-2>relevant</a> concept, applied to the object being operated
  on (usually the <b>this</b> value of the current method). This mismatches the JavaScript
  specification, where <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything-2>current</a> is generally used as
  the default (e.g., in determining the <a id=realms-settings-objects-global-objects:realm-9 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> whose <code>Array</code>
  constructor should be used to construct the result in <code>Array.prototype.map</code>).
  But this inconsistency is so embedded in the platform that we have to accept it going forward.</p>

  <div class=example>

   <p>Consider the following pages, with <code>a.html</code> being loaded in a browser
   window, <code>b.html</code> being loaded in an <code id=realms-settings-objects-global-objects:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> as shown, and <code>c.html</code> and <code>d.html</code> omitted (they can simply be empty
   documents):</p>

   <pre><code class='html'><c- c>&lt;!-- a.html --&gt;</c->
<c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Entry page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;b.html&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;frames[0].hello()&quot;</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->

<c- c>&lt;!--b.html --&gt;</c->
<c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Incumbent page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;c.html&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;c&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;d.html&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;d&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> c <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;#c&quot;</c-><c- p>).</c->contentWindow<c- p>;</c->
  <c- a>const</c-> d <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;#d&quot;</c-><c- p>).</c->contentWindow<c- p>;</c->

  window<c- p>.</c->hello <c- o>=</c-> <c- p>()</c-> <c- p>=&gt;</c-> <c- p>{</c->
    c<c- p>.</c->print<c- p>.</c->call<c- p>(</c->d<c- p>);</c->
  <c- p>};</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>Each page has its own <a id=realms-settings-objects-global-objects:browsing-context href=document-sequences.html#browsing-context>browsing context</a>, and thus its own <a id=realms-settings-objects-global-objects:realm-10 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>,
   <a href=#global-object id=realms-settings-objects-global-objects:global-object-13>global object</a>, and <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-6>environment settings object</a>.</p>

   <p>When the <code id=realms-settings-objects-global-objects:dom-print><a href=timers-and-user-prompts.html#dom-print>print()</a></code> method is called in response to pressing the
   button in <code>a.html</code>, then:</p>

   <ul><li><p>The <a href=#concept-entry-realm id=realms-settings-objects-global-objects:concept-entry-realm>entry realm</a> is that of <code>a.html</code>.<li><p>The <a href=#concept-incumbent-realm id=realms-settings-objects-global-objects:concept-incumbent-realm>incumbent realm</a> is that of <code>b.html</code>.<li><p>The <a id=realms-settings-objects-global-objects:current-realm-2 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a> is that of <code>c.html</code> (since it is the
    <code id=realms-settings-objects-global-objects:dom-print-2><a href=timers-and-user-prompts.html#dom-print>print()</a></code> method from <code>c.html</code> whose code is
    running).<li><p>The <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-4>relevant realm</a> of the object on which
    the <code id=realms-settings-objects-global-objects:dom-print-3><a href=timers-and-user-prompts.html#dom-print>print()</a></code> method is being called is that of <code>d.html</code>.</ul>
  </div>

  <div class=example>
   <p>One reason why the <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything-3>relevant</a> concept is
   generally a better default choice than the <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything-3>current</a> concept is that it is more suitable for
   creating an object that is to be persisted and returned multiple times. For example, the <code id=realms-settings-objects-global-objects:dom-navigator-getbattery><a data-x-internal=dom-navigator-getbattery href=https://w3c.github.io/battery/#widl-Navigator-getBattery-Promise-BatteryManager>navigator.getBattery()</a></code> method creates promises in the
   <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-5>relevant realm</a> for the <code id=realms-settings-objects-global-objects:navigator><a href=system-state.html#navigator>Navigator</a></code> object
   on which it is invoked. This has the following impact: <a href=references.html#refsBATTERY>[BATTERY]</a>

   <pre><code class='html'><c- c>&lt;!-- outer.html --&gt;</c->
<c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Relevant realm demo: outer page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>function</c-> doTest<c- p>()</c-> <c- p>{</c->
    <c- a>const</c-> promise <c- o>=</c-> navigator<c- p>.</c->getBattery<c- p>.</c->call<c- p>(</c->frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->navigator<c- p>);</c->

    console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> Promise<c- p>);</c->           <c- c1>// logs false</c->
    console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->Promise<c- p>);</c-> <c- c1>// logs true</c->

    frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->hello<c- p>();</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;inner.html&quot;</c-> <c- e>onload</c-><c- o>=</c-><c- s>&quot;doTest()&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->

<c- c>&lt;!-- inner.html --&gt;</c->
<c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Relevant realm demo: inner page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>function</c-> hello<c- p>()</c-> <c- p>{</c->
    <c- a>const</c-> promise <c- o>=</c-> navigator<c- p>.</c->getBattery<c- p>();</c->

    console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> Promise<c- p>);</c->        <c- c1>// logs true</c->
    console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> parent<c- p>.</c->Promise<c- p>);</c-> <c- c1>// logs false</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>If the algorithm for the <code id=realms-settings-objects-global-objects:dom-navigator-getbattery-2><a data-x-internal=dom-navigator-getbattery href=https://w3c.github.io/battery/#widl-Navigator-getBattery-Promise-BatteryManager>getBattery()</a></code> method
   had instead used the <a id=realms-settings-objects-global-objects:current-realm-3 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>, all the results would be reversed. That is,
   after the first call to <code id=realms-settings-objects-global-objects:dom-navigator-getbattery-3><a data-x-internal=dom-navigator-getbattery href=https://w3c.github.io/battery/#widl-Navigator-getBattery-Promise-BatteryManager>getBattery()</a></code> in <code>outer.html</code>, the <code id=realms-settings-objects-global-objects:navigator-2><a href=system-state.html#navigator>Navigator</a></code> object in <code>inner.html</code> would be permanently storing a <code>Promise</code> object
   created in <code>outer.html</code>'s <a id=realms-settings-objects-global-objects:realm-11 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>, and calls like that inside the
   <code>hello()</code> function would thus return a promise from the "wrong" realm. Since
   this is undesirable, the algorithm instead uses the <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-6>relevant realm</a>, giving the sensible results indicated in
   the comments above.</p>
  </div>

  <hr>

  <p>The rest of this section deals with formally defining the <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything-4>entry</a>, <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything-4>incumbent</a>, <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything-4>current</a>, and <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything-4>relevant</a> concepts.</p>

  <h6 id=entry><span class=secno>8.1.3.3.1</span> Entry<a href=#entry class=self-link></a></h6>

  <p>The process of <a href=#calling-scripts>calling scripts</a> will push or pop <a href=#realm-execution-context id=entry:realm-execution-context>realm execution contexts</a> onto the <a id=entry:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript
  execution context stack</a>, interspersed with other <a href=https://tc39.es/ecma262/#sec-execution-contexts id=entry:javascript-execution-context data-x-internal=javascript-execution-context>execution contexts</a>.</p>

  <p>With this in hand, we define the <dfn id=entry-execution-context>entry execution context</dfn> to be the most recently
  pushed item in the <a id=entry:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> that is a <a href=#realm-execution-context id=entry:realm-execution-context-2>realm execution context</a>. The <dfn id=concept-entry-realm>entry
  realm</dfn> is the <a href=#entry-execution-context id=entry:entry-execution-context>entry execution context</a>'s Realm component.</p>

  <p>Then, the <dfn id=entry-settings-object>entry settings object</dfn> is the <a href=#concept-realm-settings-object id=entry:concept-realm-settings-object>environment settings object</a> of the <a href=#concept-entry-realm id=entry:concept-entry-realm>entry realm</a>.</p>

  <p>Similarly, the <dfn id=entry-global-object>entry global object</dfn> is the <a href=#concept-realm-global id=entry:concept-realm-global>global object</a> of the <a href=#concept-entry-realm id=entry:concept-entry-realm-2>entry
  realm</a>.</p>

  <h6 id=incumbent><span class=secno>8.1.3.3.2</span> Incumbent<a href=#incumbent class=self-link></a></h6>

  <p>All <a href=https://tc39.es/ecma262/#sec-execution-contexts id=incumbent:javascript-execution-context data-x-internal=javascript-execution-context>JavaScript execution contexts</a> must
  contain, as part of their code evaluation state, a <dfn id=skip-when-determining-incumbent-counter>skip-when-determining-incumbent
  counter</dfn> value, which is initially zero. In the process of <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback>preparing to run a callback</a> and <a href=#clean-up-after-running-a-callback id=incumbent:clean-up-after-running-a-callback>cleaning up after running a callback</a>, this value will be incremented and
  decremented.</p>

  <p>Every <a href=#event-loop id=incumbent:event-loop>event loop</a> has an associated <dfn id=backup-incumbent-settings-object-stack>backup incumbent settings object
  stack</dfn>, initially empty. Roughly speaking, it is used to determine the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object>incumbent
  settings object</a> when no author code is on the stack, but author code is responsible for the
  current algorithm having been run in some way. The process of <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-2>preparing to run a callback</a> and <a href=#clean-up-after-running-a-callback id=incumbent:clean-up-after-running-a-callback-2>cleaning up after running a callback</a> manipulate this stack. <a href=references.html#refsWEBIDL>[WEBIDL]</a></p>

  <p>When Web IDL is used to <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=incumbent:es-invoking-callback-functions data-x-internal=es-invoking-callback-functions>invoke</a> author
  code, or when <a href=#hostenqueuepromisejob id=incumbent:hostenqueuepromisejob>HostEnqueuePromiseJob</a> invokes a promise job, they use the following
  algorithms to track relevant data for determining the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-2>incumbent settings object</a>:</p>

  <p>To <dfn id=prepare-to-run-a-callback data-export="">prepare to run a callback</dfn> with an <a href=#environment-settings-object id=incumbent:environment-settings-object>environment settings object</a>
  <var>settings</var>:</p>

  <ol><li><p>Push <var>settings</var> onto the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack>backup incumbent settings object
   stack</a>.<li><p>Let <var>context</var> be the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context>topmost script-having execution
   context</a>.<li><p>If <var>context</var> is not null, increment <var>context</var>'s
   <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter>skip-when-determining-incumbent counter</a>.</ol>

  <p>To <dfn id=clean-up-after-running-a-callback data-export="">clean up after running a callback</dfn> with an <a href=#environment-settings-object id=incumbent:environment-settings-object-2>environment settings
  object</a> <var>settings</var>:</p>

  <ol><li>
    <p>Let <var>context</var> be the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-2>topmost script-having execution context</a>.</p>

    <p class=note>This will be the same as the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-3>topmost script-having execution
    context</a> inside the corresponding invocation of <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-3>prepare to run a
    callback</a>.</p>
   <li><p>If <var>context</var> is not null, decrement <var>context</var>'s
   <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-2>skip-when-determining-incumbent counter</a>.<li><p><a id=incumbent:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: the topmost entry of the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-2>backup incumbent settings object
   stack</a> is <var>settings</var>.<li><p>Remove <var>settings</var> from the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-3>backup incumbent settings object
   stack</a>.</ol>

  <p>Here, the <dfn id=topmost-script-having-execution-context>topmost script-having execution context</dfn> is the topmost entry of the
  <a id=incumbent:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> that has a non-null ScriptOrModule component, or
  null if there is no such entry in the <a id=incumbent:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.</p>

  <p>With all this in place, the <dfn id=incumbent-settings-object data-export="">incumbent settings object</dfn> is determined as
  follows:</p>

  <ol><li><p>Let <var>context</var> be the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-4>topmost script-having execution
   context</a>.<li>
    <p>If <var>context</var> is null, or if <var>context</var>'s
    <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-3>skip-when-determining-incumbent counter</a> is greater than zero, then:</p>

    <ol><li>
      <p><a id=incumbent:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-4>backup incumbent settings object stack</a> is not
      empty.</p>

      <p class=note>This assert would fail if you try to obtain the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-3>incumbent settings
      object</a> from inside an algorithm that was triggered neither by <a href=#calling-scripts>calling scripts</a> nor by Web IDL <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=incumbent:es-invoking-callback-functions-2 data-x-internal=es-invoking-callback-functions>invoking</a> a callback. For example, it would
      trigger if you tried to obtain the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-4>incumbent settings object</a> inside an algorithm
      that ran periodically as part of the <a href=#event-loop id=incumbent:event-loop-2>event loop</a>, with no involvement of author
      code. In such cases the <a href=#concept-incumbent-everything id=incumbent:concept-incumbent-everything>incumbent</a> concept
      cannot be used.</p>
     <li><p>Return the topmost entry of the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-5>backup incumbent settings object
     stack</a>.</ol>
   <li><p>Return <var>context</var>'s Realm component's <a href=#concept-realm-settings-object id=incumbent:concept-realm-settings-object>settings object</a>.</ol>

  <p>Then, the <dfn id=concept-incumbent-realm data-export="">incumbent realm</dfn> is the <a href="#environment-settings-object's-realm" id="incumbent:environment-settings-object's-realm">realm</a> of the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-5>incumbent settings
  object</a>.</p>

  <p>Similarly, the <dfn id=concept-incumbent-global data-export="">incumbent global object</dfn> is
  the <a href=#concept-settings-object-global id=incumbent:concept-settings-object-global>global object</a> of the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-6>incumbent
  settings object</a>.</p>

  <hr>

  <p>The following series of examples is intended to make it clear how all of the different
  mechanisms contribute to the definition of the <a href=#incumbent>incumbent</a> concept:</p>

  <div id=example-incumbent-1 class=example><a href=#example-incumbent-1 class=self-link></a>
   <p>Consider the following starter example:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->postMessage<c- p>(</c-><c- u>&quot;some data&quot;</c-><c- p>,</c-> <c- u>&quot;*&quot;</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>There are two interesting <a href=#environment-settings-object id=incumbent:environment-settings-object-3>environment settings
   objects</a> here: that of <code>window</code>, and that of <code>frames[0]</code>. Our concern is: what is the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-7>incumbent settings object</a> at
   the time that the algorithm for <code id=incumbent:dom-window-postmessage><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code>
   executes?</p>

   <p>It should be that of <code>window</code>, to capture the intuitive notion that the
   author script responsible for causing the algorithm to happen is executing in <code>window</code>, not <code>frames[0]</code>. This makes sense: the <a id=incumbent:window-post-message-steps href=web-messaging.html#window-post-message-steps>window
   post message steps</a> use the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-8>incumbent settings object</a> to determine the <code id=incumbent:dom-messageevent-source><a href=comms.html#dom-messageevent-source>source</a></code> property of the resulting
   <code id=incumbent:messageevent><a href=comms.html#messageevent>MessageEvent</a></code>, and in this case <code>window</code> is definitely the
   source of the message.</p>

   <p>Let us now explain how the steps given above give us our intuitively-desired result of <code>window</code>'s <a href=#relevant-settings-object id=incumbent:relevant-settings-object>relevant settings object</a>.</p>

   <p>When the <a id=incumbent:window-post-message-steps-2 href=web-messaging.html#window-post-message-steps>window post message steps</a> look up the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-9>incumbent settings
   object</a>, the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-5>topmost script-having execution context</a> will be that
   corresponding to the <code id=incumbent:the-script-element><a href=scripting.html#the-script-element>script</a></code> element: it was pushed onto the <a id=incumbent:javascript-execution-context-stack-3 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript
   execution context stack</a> as part of <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=incumbent:js-scriptevaluation data-x-internal=js-scriptevaluation>ScriptEvaluation</a> during the <a href=#run-a-classic-script id=incumbent:run-a-classic-script>run a classic script</a>
   algorithm. Since there are no Web IDL callback invocations involved, the context's
   <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-4>skip-when-determining-incumbent counter</a> is zero, so it is used to determine the
   <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-10>incumbent settings object</a>; the result is the <a href=#environment-settings-object id=incumbent:environment-settings-object-4>environment settings
   object</a> of <code>window</code>.</p>

   <p>(Note how the <a href=#environment-settings-object id=incumbent:environment-settings-object-5>environment settings object</a> of <code>frames[0]</code> is
   the <a href=#relevant-settings-object id=incumbent:relevant-settings-object-2>relevant settings object</a> of <a id=incumbent:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> at the time the <code id=incumbent:dom-window-postmessage-2><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code> method is called, and thus is involved in
   determining the <em>target</em> of the message. Whereas the incumbent is used to determine the
   <em>source</em>.)
  </div>

  <div id=example-incumbent-2 class=example><a href=#example-incumbent-2 class=self-link></a>
   <p>Consider the following more complicated example:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> bound <c- o>=</c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->postMessage<c- p>.</c->bind<c- p>(</c->frames<c- p>[</c-><c- mf>0</c-><c- p>],</c-> <c- u>&quot;some data&quot;</c-><c- p>,</c-> <c- u>&quot;*&quot;</c-><c- p>);</c->
  window<c- p>.</c->setTimeout<c- p>(</c->bound<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>This example is very similar to the previous one, but with an extra indirection through <code>Function.prototype.bind</code> as well as <code id=incumbent:dom-settimeout><a href=timers-and-user-prompts.html#dom-settimeout>setTimeout()</a></code>. But, the answer should be the same: invoking
   algorithms asynchronously should not change the <a href=#concept-incumbent-everything id=incumbent:concept-incumbent-everything-2>incumbent</a> concept.</p>

   <p>This time, the result involves more complicated mechanisms:</p>

   <p>When <code>bound</code> is <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=incumbent:concept-idl-convert data-x-internal=concept-idl-convert>converted</a> to a
   Web IDL callback type, the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-11>incumbent settings object</a> is that corresponding to <code>window</code> (in the same manner as in our starter example above). Web IDL stores this
   as the resulting callback value's <a id=incumbent:callback-context href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a>.</p>

   <p>When the <a href=#concept-task id=incumbent:concept-task>task</a> posted by <code id=incumbent:dom-settimeout-2><a href=timers-and-user-prompts.html#dom-settimeout>setTimeout()</a></code> executes, the algorithm for that task uses Web IDL to
   <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=incumbent:es-invoking-callback-functions-3 data-x-internal=es-invoking-callback-functions>invoke</a> the stored callback value. Web IDL in
   turn calls the above <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-4>prepare to run a callback</a> algorithm. This pushes the stored
   <a id=incumbent:callback-context-2 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a> onto the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-6>backup incumbent settings object stack</a>. At
   this time (inside the timer task) there is no author code on the stack, so the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-6>topmost
   script-having execution context</a> is null, and nothing gets its
   <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-5>skip-when-determining-incumbent counter</a> incremented.</p>

   <p>Invoking the callback then calls <code>bound</code>, which in turn calls
   the <code id=incumbent:dom-window-postmessage-3><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code> method of <code>frames[0]</code>. When the <code id=incumbent:dom-window-postmessage-4><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code>
   algorithm looks up the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-12>incumbent settings object</a>, there is still no author code on
   the stack, since the bound function just directly calls the built-in method. So the
   <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-7>topmost script-having execution context</a> will be null: the <a id=incumbent:javascript-execution-context-2 href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution
   context</a> stack only contains an execution context corresponding to <code id=incumbent:dom-window-postmessage-5><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code>, with no <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=incumbent:js-scriptevaluation-2 data-x-internal=js-scriptevaluation>ScriptEvaluation</a> context or similar below it.</p>

   <p>This is where we fall back to the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-7>backup incumbent settings object stack</a>. As
   noted above, it will contain as its topmost entry the <a href=#relevant-settings-object id=incumbent:relevant-settings-object-3>relevant settings object</a> of
   <code>window</code>. So that is what is used as the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-13>incumbent settings
   object</a> while executing the <code id=incumbent:dom-window-postmessage-6><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code>
   algorithm.</p>
  </div>

  <div id=example-incumbent-3 class=example><a href=#example-incumbent-3 class=self-link></a>
   <p>Consider this final, even more convoluted example:</p>

   <pre><code class='html'><c- c>&lt;!-- a.html --&gt;</c->
<c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>button</c-><c- p>&gt;</c->click me<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
<c- a>const</c-> bound <c- o>=</c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->location<c- p>.</c->assign<c- p>.</c->bind<c- p>(</c->frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->location<c- p>,</c-> <c- u>&quot;https://example.com/&quot;</c-><c- p>);</c->
document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;button&quot;</c-><c- p>).</c->addEventListener<c- p>(</c-><c- u>&quot;click&quot;</c-><c- p>,</c-> bound<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- c>&lt;!-- b.html --&gt;</c->
<c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;a.html&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> iframe <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;iframe&quot;</c-><c- p>);</c->
  iframe<c- p>.</c->onload <c- o>=</c-> <c- a>function</c-> onLoad<c- p>()</c-> <c- p>{</c->
    iframe<c- p>.</c->contentWindow<c- p>.</c->document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;button&quot;</c-><c- p>).</c->click<c- p>();</c->
  <c- p>};</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>Again there are two interesting <a href=#environment-settings-object id=incumbent:environment-settings-object-6>environment
   settings objects</a> in play: that of <code>a.html</code>, and that of <code>b.html</code>. When the <code id=incumbent:dom-location-assign><a href=nav-history-apis.html#dom-location-assign>location.assign()</a></code>
   method triggers the <a id=incumbent:location-object-navigate href=nav-history-apis.html#location-object-navigate><code>Location</code>-object navigate</a> algorithm, what will be
   the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-14>incumbent settings object</a>? As before, it should intuitively be that of <code>a.html</code>: the <code id=incumbent:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> listener was originally
   scheduled by <code>a.html</code>, so even if something involving <code>b.html</code> causes the listener to fire, the <a href=#concept-incumbent-everything id=incumbent:concept-incumbent-everything-3>incumbent</a> responsible is that of <code>a.html</code>.</p>

   <p>The callback setup is similar to the previous example: when <code>bound</code> is
   <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=incumbent:concept-idl-convert-2 data-x-internal=concept-idl-convert>converted</a> to a Web IDL callback type, the
   <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-15>incumbent settings object</a> is that corresponding to <code>a.html</code>,
   which is stored as the callback's <a id=incumbent:callback-context-3 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a>.</p>

   <p>When the <code id=incumbent:dom-click><a href=interaction.html#dom-click>click()</a></code> method is called inside <code>b.html</code>, it <a href=https://dom.spec.whatwg.org/#concept-event-dispatch id=incumbent:concept-event-dispatch data-x-internal=concept-event-dispatch>dispatches</a> a <code id=incumbent:event-click-2><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event on the button that is inside <code>a.html</code>. This time, when the <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-5>prepare to run a callback</a> algorithm
   executes as part of event dispatch, there <em>is</em> author code on the stack; the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-8>topmost
   script-having execution context</a> is that of the <code>onLoad</code> function,
   whose <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-6>skip-when-determining-incumbent counter</a> gets incremented. Additionally, <code>a.html</code>'s <a href=#environment-settings-object id=incumbent:environment-settings-object-7>environment settings object</a> (stored as the
   <code id=incumbent:eventhandler><a href=#eventhandler>EventHandler</a></code>'s <a id=incumbent:callback-context-4 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a>) is pushed onto the
   <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-8>backup incumbent settings object stack</a>.</p>

   <p>Now, when the <a id=incumbent:location-object-navigate-2 href=nav-history-apis.html#location-object-navigate><code>Location</code>-object navigate</a> algorithm looks up the
   <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-16>incumbent settings object</a>, the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-9>topmost script-having execution
   context</a> is still that of the <code>onLoad</code> function (due to the fact we
   are using a bound function as the callback). Its <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-7>skip-when-determining-incumbent
   counter</a> value is one, however, so we fall back to the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-9>backup incumbent settings
   object stack</a>. This gives us the <a href=#environment-settings-object id=incumbent:environment-settings-object-8>environment settings object</a> of <code>a.html</code>, as expected.</p>

   <p>Note that this means that even though it is the <code id=incumbent:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> inside <code>a.html</code> that navigates, it is <code>a.html</code> itself that is used
   as the source <code id=incumbent:document><a href=dom.html#document>Document</a></code>, which determines among other things the <a href=https://fetch.spec.whatwg.org/#concept-request-client id=incumbent:concept-request-client data-x-internal=concept-request-client>request client</a>. This is <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=26603#c36">perhaps the only justifiable use
   of the incumbent concept on the web platform</a>; in all other cases the consequences of using it
   are simply confusing and we hope to one day switch them to use <a href=#concept-current-everything id=incumbent:concept-current-everything>current</a> or <a href=#concept-relevant-everything id=incumbent:concept-relevant-everything>relevant</a> as appropriate.</p>
  </div>

  <h6 id=current><span class=secno>8.1.3.3.3</span> Current<a href=#current class=self-link></a></h6>

  <p>The JavaScript specification defines the <a id=current:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>, also known as the "current
  Realm Record". <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <p>Then, the <dfn id=current-settings-object data-export="">current settings object</dfn> is the <a href=#concept-realm-settings-object id=current:concept-realm-settings-object>environment settings object</a> of the <a id=current:current-realm-2 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current
  realm</a>.</p>

  <p>Similarly, the <dfn id=current-global-object data-export="">current global object</dfn> is the <a href=#concept-realm-global id=current:concept-realm-global>global object</a> of the <a id=current:current-realm-3 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>.</p>

  <h6 id=relevant><span class=secno>8.1.3.3.4</span> Relevant<a href=#relevant class=self-link></a></h6>

  <p>The <dfn id=concept-relevant-realm data-export="">relevant realm</dfn> for a <a id=relevant:platform-object href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform
  object</a> is the value of <a href=https://webidl.spec.whatwg.org/#es-platform-objects id=relevant:realm-field-of-a-platform-object data-x-internal=realm-field-of-a-platform-object>its [[Realm]]
  field</a>.</p>

  <p>Then, the <dfn id=relevant-settings-object data-export="">relevant settings object</dfn> for a <a id=relevant:platform-object-2 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a>
  <var>o</var> is the <a href=#concept-realm-settings-object id=relevant:concept-realm-settings-object>environment settings
  object</a> of the <a href=#concept-relevant-realm id=relevant:concept-relevant-realm>relevant realm</a> for
  <var>o</var>.</p>

  <p>Similarly, the <dfn id=concept-relevant-global data-export="">relevant global object</dfn> for a
  <a id=relevant:platform-object-3 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> <var>o</var> is the <a href=#concept-realm-global id=relevant:concept-realm-global>global
  object</a> of the <a href=#concept-relevant-realm id=relevant:concept-relevant-realm-2>relevant realm</a> for
  <var>o</var>.</p>

  <h5 id=enabling-and-disabling-scripting><span class=secno>8.1.3.4</span> Enabling and disabling scripting<a href=#enabling-and-disabling-scripting class=self-link></a></h5>

  <p id=concept-bc-script><dfn id=concept-environment-script>Scripting is enabled</dfn> for
  an <a href=#environment-settings-object id=enabling-and-disabling-scripting:environment-settings-object>environment settings object</a> <var>settings</var> when all of the following
  conditions are true:</p>

  <ul><li>The user agent supports scripting.<li>
   <a id=enabling-and-disabling-scripting:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
   The user has not disabled scripting for <var>settings</var> at this time. (User agents may
   provide users with the option to disable scripting globally, or in a finer-grained manner, e.g.,
   on a per-origin basis, down to the level of individual <a href=#environment-settings-object id=enabling-and-disabling-scripting:environment-settings-object-2>environment settings objects</a>.)<li id=sandboxScriptBlocked>Either <var>settings</var>'s <a href=#concept-settings-object-global id=enabling-and-disabling-scripting:concept-settings-object-global>global object</a> is not a <code id=enabling-and-disabling-scripting:window><a href=nav-history-apis.html#window>Window</a></code> object,
   or <var>settings</var>'s <a href=#concept-settings-object-global id=enabling-and-disabling-scripting:concept-settings-object-global-2>global object</a>'s
   <a href=nav-history-apis.html#concept-document-window id=enabling-and-disabling-scripting:concept-document-window>associated <code>Document</code></a>'s <a id=enabling-and-disabling-scripting:active-sandboxing-flag-set href=browsers.html#active-sandboxing-flag-set>active
   sandboxing flag set</a> does not have its <a id=enabling-and-disabling-scripting:sandboxed-scripts-browsing-context-flag href=browsers.html#sandboxed-scripts-browsing-context-flag>sandboxed scripts browsing context flag</a>
   set.</ul>

  <p id=concept-bc-noscript><dfn id=concept-environment-noscript>Scripting is disabled</dfn>
  for an <a href=#environment-settings-object id=enabling-and-disabling-scripting:environment-settings-object-3>environment settings object</a> when scripting is not <a href=#concept-environment-script id=enabling-and-disabling-scripting:concept-environment-script>enabled</a> for it, i.e., when any of the above conditions
  are false.</p>

  <hr>

  <p><dfn id=concept-n-script>Scripting is enabled</dfn> for a node <var>node</var> if
  <var>node</var>'s <a id=enabling-and-disabling-scripting:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=document-sequences.html#concept-document-bc id=enabling-and-disabling-scripting:concept-document-bc>browsing
  context</a> is non-null, and <a href=#concept-environment-script id=enabling-and-disabling-scripting:concept-environment-script-2>scripting is
  enabled</a> for <var>node</var>'s <a href=#relevant-settings-object id=enabling-and-disabling-scripting:relevant-settings-object>relevant settings object</a>.</p>

  <p><dfn id=concept-n-noscript>Scripting is disabled</dfn> for a node when scripting is not
  <a href=#concept-n-script id=enabling-and-disabling-scripting:concept-n-script>enabled</a>, i.e., when its <a id=enabling-and-disabling-scripting:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=document-sequences.html#concept-document-bc id=enabling-and-disabling-scripting:concept-document-bc-2>browsing context</a> is null or when <a href=#concept-environment-noscript id=enabling-and-disabling-scripting:concept-environment-noscript>scripting is disabled</a> for its <a href=#relevant-settings-object id=enabling-and-disabling-scripting:relevant-settings-object-2>relevant settings
  object</a>.</p>

  <h5 id=secure-contexts><span class=secno>8.1.3.5</span> Secure contexts<a href=#secure-contexts class=self-link></a></h5>

  <p>An <a href=#environment id=secure-contexts:environment>environment</a> <var>environment</var> is a <dfn id=secure-context data-lt="secure context|Is
  an environment settings object contextually secure?" data-export="">secure context</dfn> if the following
  algorithm returns true:</p>

  <ol><li>
    <p>If <var>environment</var> is an <a href=#environment-settings-object id=secure-contexts:environment-settings-object>environment settings object</a>, then:</p>

    <ol><li><p>Let <var>global</var> be <var>environment</var>'s <a href=#concept-settings-object-global id=secure-contexts:concept-settings-object-global>global object</a>.<li>
      <p>If <var>global</var> is a <code id=secure-contexts:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code>, then:

      <ol><li>
        <p>If <var>global</var>'s <a id=secure-contexts:concept-WorkerGlobalScope-owner-set href=workers.html#concept-WorkerGlobalScope-owner-set>owner set</a>[0]'s <a href=#relevant-settings-object id=secure-contexts:relevant-settings-object>relevant settings object</a>
        is a <a href=#secure-context id=secure-contexts:secure-context>secure context</a>, then return true.</p>

        <p class=note>We only need to check the 0th item since they will necessarily all be
        consistent.</p>
       <li><p>Return false.</ol>
     <li>
      <p>If <var>global</var> is a <code id=secure-contexts:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code>, then return true.</p>

      <p class=note>Worklets can only be created in secure contexts.</p>
     </ol>
   <li><p>If the result of <a id=secure-contexts:is-url-potentially-trustworthy href=https://w3c.github.io/webappsec-secure-contexts/#potentially-trustworthy-url data-x-internal=is-url-potentially-trustworthy>Is url potentially trustworthy?</a> given
   <var>environment</var>'s <a href=#concept-environment-top-level-creation-url id=secure-contexts:concept-environment-top-level-creation-url>top-level creation URL</a> is "<code>Potentially
   Trustworthy</code>", then return true.<li><p>Return false.</ol>

  <p>An <a href=#environment id=secure-contexts:environment-2>environment</a> is a <dfn id=non-secure-context data-export="">non-secure context</dfn> if it is not a
  <a href=#secure-context id=secure-contexts:secure-context-2>secure context</a>.</p>

  

  <h4 id=scripting-processing-model><span class=secno>8.1.4</span> <span id=processing-model-7></span>Script processing
  model<a href=#scripting-processing-model class=self-link></a></h4>

  

  <h5 id=script-structs><span class=secno>8.1.4.1</span> <span id=definitions-2></span>Scripts<a href=#script-structs class=self-link></a></h5>

  <p>A <dfn id=concept-script data-export="">script</dfn> is one of two possible <a href=https://infra.spec.whatwg.org/#struct id=script-structs:struct data-x-internal=struct>structs</a> (namely, a <a href=#classic-script id=script-structs:classic-script>classic script</a> or a
  <a href=#module-script id=script-structs:module-script>module script</a>). All scripts have:</p>

  <dl><dt>A <dfn data-dfn-for=script id=settings-object data-export="">settings object</dfn><dd><p>An <a href=#environment-settings-object id=script-structs:environment-settings-object>environment settings object</a>, containing various settings that are shared
   with other <a href=#concept-script id=script-structs:concept-script>scripts</a> in the same context.<dt>A <dfn data-dfn-for=script id=concept-script-record data-export="">record</dfn><dd>
    <p>One of the following:</p>

    <ul><li><p>a <a id=script-structs:script-record href=https://tc39.es/ecma262/#sec-script-records data-x-internal=script-record>script record</a>, for <a href=#classic-script id=script-structs:classic-script-2>classic
     scripts</a>;<li><p>a <a id=script-structs:source-text-module-record href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module Record</a>, for <a href=#javascript-module-script id=script-structs:javascript-module-script>JavaScript module scripts</a>;<li><p>a <a id=script-structs:synthetic-module-record href=https://tc39.es/ecma262/#sec-synthetic-module-records data-x-internal=synthetic-module-record>Synthetic Module Record</a>, for <a href=#css-module-script id=script-structs:css-module-script>CSS module
     scripts</a> and <a href=#json-module-script id=script-structs:json-module-script>JSON module scripts</a>;<li><p>a <a id=script-structs:webassembly-module-record href=https://webassembly.github.io/esm-integration/js-api/index.html#webassembly-module-record data-x-internal=webassembly-module-record>WebAssembly Module Record</a>, for <a href=#webassembly-module-script id=script-structs:webassembly-module-script>WebAssembly module scripts</a>; or<li><p>null, representing a parsing failure.</ul>
   <dt>A <dfn data-dfn-for=script id=concept-script-parse-error>parse error</dfn><dd>
    <p>A JavaScript value, which has meaning only if the <a href=#concept-script-record id=script-structs:concept-script-record>record</a> is null, indicating that the corresponding script
    source text could not be parsed.</p>

    <p class=note>This value is used for internal tracking of immediate parse errors when <a href=#creating-scripts>creating scripts</a>, and is not to be used directly. Instead, consult
    the <a href=#concept-script-error-to-rethrow id=script-structs:concept-script-error-to-rethrow>error to rethrow</a> when determining
    "what went wrong" for this script.</p>
  <dt>An <dfn data-dfn-for=script id=concept-script-error-to-rethrow data-export="">error
   to rethrow</dfn><dd>
    <p>A JavaScript value representing an error that will prevent evaluation from succeeding. It
    will be re-thrown by any attempts to <a href=#calling-scripts>run</a> the script.</p>

    <p class=note>This could be the script's <a href=#concept-script-parse-error id=script-structs:concept-script-parse-error>parse
    error</a>, but in the case of a <a href=#module-script id=script-structs:module-script-2>module script</a> it could instead be the
    <a href=#concept-script-parse-error id=script-structs:concept-script-parse-error-2>parse error</a> from one of its dependencies, or
    an error from <a href=#resolve-a-module-specifier id=script-structs:resolve-a-module-specifier>resolve a module specifier</a>.</p>

    <p class=note>Since this exception value is provided by the JavaScript specification, we know
    that it is never null, so we use null to signal that no error has occurred.</p>
   <dt><dfn data-dfn-for=script id=concept-script-script-fetch-options data-export="">Fetch options</dfn><dd>Null or a <a href=#script-fetch-options id=script-structs:script-fetch-options>script fetch options</a>, containing various options related to fetching
   this script or <a href=#module-script id=script-structs:module-script-3>module scripts</a> that it imports.<dt>A <dfn data-dfn-for=script id=concept-script-base-url data-export="">base
   URL</dfn><dd><p>Null or a base <a id=script-structs:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> used for <a href=#resolve-a-module-specifier id=script-structs:resolve-a-module-specifier-2>resolving module specifiers</a>. When non-null, this will either be the URL from
   which the script was obtained, for external scripts, or the <a id=script-structs:document-base-url href=urls-and-fetching.html#document-base-url>document base URL</a> of the
   containing document, for inline scripts.</dl>


  <p>A <dfn id=classic-script data-export="">classic script</dfn> is a type of <a href=#concept-script id=script-structs:concept-script-2>script</a>
  that has the following additional <a href=https://infra.spec.whatwg.org/#struct-item id=script-structs:struct-item data-x-internal=struct-item>item</a>:</p>

  <dl><dt>A <dfn id=muted-errors>muted errors</dfn> boolean<dd><p>A boolean which, if true, means that error information will not be provided for errors in
   this script. This is used to mute errors for cross-origin scripts, since that can leak private
   information.</dl>

  <p>A <dfn id=module-script data-export="">module script</dfn> is another type of <a href=#concept-script id=script-structs:concept-script-3>script</a>. It has no additional <a href=https://infra.spec.whatwg.org/#struct-item id=script-structs:struct-item-2 data-x-internal=struct-item>items</a>.</p>

  <p><a href=#module-script id=script-structs:module-script-4>Module scripts</a> can be classified into four types:</p>

  <ul><li><p>A <a href=#module-script id=script-structs:module-script-5>module script</a> is a <dfn id=javascript-module-script data-export="">JavaScript module script</dfn> if
   its <a href=#concept-script-record id=script-structs:concept-script-record-2>record</a> is a <a id=script-structs:source-text-module-record-2 href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module
   Record</a>.<li>
    <p>A <a href=#module-script id=script-structs:module-script-6>module script</a> is a <dfn id=css-module-script data-export="">CSS module script</dfn> if its <a href=#concept-script-record id=script-structs:concept-script-record-3>record</a> is a <a id=script-structs:synthetic-module-record-2 href=https://tc39.es/ecma262/#sec-synthetic-module-records data-x-internal=synthetic-module-record>Synthetic Module Record</a>, and it
    was created via the <a href=#creating-a-css-module-script id=script-structs:creating-a-css-module-script>create a CSS module
    script</a> algorithm. CSS module scripts represent a parsed CSS stylesheet.</p>

    
   <li>
    <p>A <a href=#module-script id=script-structs:module-script-7>module script</a> is a <dfn id=json-module-script data-export="">JSON module script</dfn> if its <a href=#concept-script-record id=script-structs:concept-script-record-4>record</a> is a <a id=script-structs:synthetic-module-record-3 href=https://tc39.es/ecma262/#sec-synthetic-module-records data-x-internal=synthetic-module-record>Synthetic Module Record</a>, and it
    was created via the <a href=#creating-a-json-module-script id=script-structs:creating-a-json-module-script>create a JSON module
    script</a> algorithm. JSON module scripts represent a parsed JSON document.</p>

    
   <li>
    <p>A <a href=#module-script id=script-structs:module-script-8>module script</a> is a <dfn id=webassembly-module-script data-export="">WebAssembly module script</dfn> if
    its <a href=#concept-script-record id=script-structs:concept-script-record-5>record</a> is a <a id=script-structs:webassembly-module-record-2 href=https://webassembly.github.io/esm-integration/js-api/index.html#webassembly-module-record data-x-internal=webassembly-module-record>WebAssembly Module
    Record</a>.</p>
   </ul>

  <p class=note>As CSS stylesheets and JSON documents do not import dependent modules, and do not
  throw exceptions on evaluation, the <a href=#concept-script-script-fetch-options id=script-structs:concept-script-script-fetch-options>fetch
  options</a> and <a href=#concept-script-base-url id=script-structs:concept-script-base-url>base URL</a> of <a href=#css-module-script id=script-structs:css-module-script-2>CSS module scripts</a> and <a href=#json-module-script id=script-structs:json-module-script-2>JSON module
  scripts</a> and are always null.</p>

  <p>The <dfn id=active-script>active script</dfn> is determined by the following algorithm:</p>

  <ol><li><p>Let <var>record</var> be <a id=script-structs:getactivescriptormodule href=https://tc39.es/ecma262/#sec-getactivescriptormodule data-x-internal=getactivescriptormodule>GetActiveScriptOrModule</a>().<li><p>If <var>record</var> is null, return null.<li><p>Return <var>record</var>.[[HostDefined]].</ol>

  <p class=note>The <a href=#active-script id=script-structs:active-script>active script</a> concept is so far only used by the
  <code id=script-structs:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> feature, to determine the <a href=#concept-script-base-url id=script-structs:concept-script-base-url-2>base
  URL</a> to use for resolving relative module specifiers.</p>

  <h5 id=fetching-scripts><span class=secno>8.1.4.2</span> Fetching scripts<a href=#fetching-scripts class=self-link></a></h5>

  <p>This section introduces a number of algorithms for fetching scripts, taking various necessary
  inputs and resulting in <a href=#classic-script id=fetching-scripts:classic-script>classic</a> or <a href=#module-script id=fetching-scripts:module-script>module scripts</a>.</p>

  <hr>

  <p><dfn id=script-fetch-options>Script fetch options</dfn> is a <a id=fetching-scripts:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with the following <a href=https://infra.spec.whatwg.org/#struct-item id=fetching-scripts:struct-item data-x-internal=struct-item>items</a>:</p>

  <dl><dt><dfn id=concept-script-fetch-options-nonce>cryptographic nonce</dfn><dd><p>The <a href=https://fetch.spec.whatwg.org/#concept-request-nonce-metadata id=fetching-scripts:concept-request-nonce-metadata data-x-internal=concept-request-nonce-metadata>cryptographic nonce metadata</a> used
   for the initial fetch and for fetching any imported modules<dt><dfn id=concept-script-fetch-options-integrity>integrity metadata</dfn><dd><p>The <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=fetching-scripts:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity metadata</a> used for
   the initial fetch<dt><dfn id=concept-script-fetch-options-parser>parser metadata</dfn><dd><p>The <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata data-x-internal=concept-request-parser-metadata>parser metadata</a> used for the
   initial fetch and for fetching any imported modules<dt><dfn id=concept-script-fetch-options-credentials>credentials mode</dfn><dd><p>The <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=fetching-scripts:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> used for the
   initial fetch (for <a href=#module-script id=fetching-scripts:module-script-2>module scripts</a>) and for fetching any
   imported modules (for both <a href=#module-script id=fetching-scripts:module-script-3>module scripts</a> and <a href=#classic-script id=fetching-scripts:classic-script-2>classic scripts</a>)<dt><dfn id=concept-script-fetch-options-referrer-policy>referrer policy</dfn><dd>
    <p>The <a href=https://fetch.spec.whatwg.org/#concept-request-referrer-policy id=fetching-scripts:concept-request-referrer-policy data-x-internal=concept-request-referrer-policy>referrer policy</a> used for the
    initial fetch and for fetching any imported modules</p>

    <p class=note>This policy can mutate after a <a href=#module-script id=fetching-scripts:module-script-4>module script</a>'s <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response data-x-internal=concept-response>response</a> is received, to be the <a id=fetching-scripts:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>
    <a href=https://w3c.github.io/webappsec-referrer-policy/#parse-referrer-policy-from-header id=fetching-scripts:parse-referrer-policy-header data-x-internal=parse-referrer-policy-header>parsed</a> from the <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-2 data-x-internal=concept-response>response</a>, and used when fetching any module dependencies.</p>
   <dt><dfn id=concept-script-fetch-options-render-blocking>render-blocking</dfn><dd><p>The boolean value of <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=fetching-scripts:concept-request-render-blocking data-x-internal=concept-request-render-blocking>render-blocking</a>
   used for the initial fetch and for fetching any imported modules. Unless otherwise stated, its
   value is false.<dt><dfn id=concept-script-fetch-options-fetch-priority>fetch priority</dfn><dd><p>The <a href=https://fetch.spec.whatwg.org/#request-priority id=fetching-scripts:concept-request-priority data-x-internal=concept-request-priority>priority</a> used for the
   initial fetch</dl>

  <p class=note>Recall that via the <code id=fetching-scripts:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> feature, <a href=#classic-script id=fetching-scripts:classic-script-3>classic scripts</a> can import <a href=#module-script id=fetching-scripts:module-script-5>module scripts</a>.</p>

  <p>The <dfn id=default-script-fetch-options>default script fetch options</dfn> are a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options>script fetch options</a> whose <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce>cryptographic nonce</a> is the empty string, <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity>integrity metadata</a> is the empty string,
  <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser>parser metadata</a> is "<code>not-parser-inserted</code>", <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials>credentials mode</a> is "<code>same-origin</code>", <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy>referrer policy</a> is the empty
  string, and <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority>fetch priority</a>
  is "<code>auto</code>".</p>

  <p>To <dfn id=set-up-the-classic-script-request>set up the classic script request</dfn>,
  given a <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request data-x-internal=concept-request>request</a> <var>request</var> and
  a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-2>script fetch options</a> <var>options</var>,
  set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-nonce-metadata id=fetching-scripts:concept-request-nonce-metadata-2 data-x-internal=concept-request-nonce-metadata>cryptographic nonce
  metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce-2>cryptographic nonce</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=fetching-scripts:concept-request-integrity-metadata-2 data-x-internal=concept-request-integrity-metadata>integrity metadata</a> to <var>options</var>'s
  <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-2>integrity metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-2 data-x-internal=concept-request-parser-metadata>parser metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser-2>parser metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-referrer-policy id=fetching-scripts:concept-request-referrer-policy-2 data-x-internal=concept-request-referrer-policy>referrer policy</a> to <var>options</var>'s <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-2>referrer policy</a>, its
  <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=fetching-scripts:concept-request-render-blocking-2 data-x-internal=concept-request-render-blocking>render-blocking</a> to <var>options</var>'s
  <a href=#concept-script-fetch-options-render-blocking id=fetching-scripts:concept-script-fetch-options-render-blocking>render-blocking</a>, and its
  <a href=https://fetch.spec.whatwg.org/#request-priority id=fetching-scripts:concept-request-priority-2 data-x-internal=concept-request-priority>priority</a> to <var>options</var>'s
  <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-2>fetch priority</a>.</p>

  <p>To <dfn id=set-up-the-module-script-request>set up the module script request</dfn>,
  given a <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-2 data-x-internal=concept-request>request</a> <var>request</var> and
  a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-3>script fetch options</a> <var>options</var>,
  set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-nonce-metadata id=fetching-scripts:concept-request-nonce-metadata-3 data-x-internal=concept-request-nonce-metadata>cryptographic nonce
  metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce-3>cryptographic nonce</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=fetching-scripts:concept-request-integrity-metadata-3 data-x-internal=concept-request-integrity-metadata>integrity metadata</a> to <var>options</var>'s
  <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-3>integrity metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-3 data-x-internal=concept-request-parser-metadata>parser metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser-3>parser metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=fetching-scripts:concept-request-credentials-mode-2 data-x-internal=concept-request-credentials-mode>credentials mode</a> to <var>options</var>'s <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-2>credentials mode</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-referrer-policy id=fetching-scripts:concept-request-referrer-policy-3 data-x-internal=concept-request-referrer-policy>referrer policy</a> to <var>options</var>'s <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-3>referrer policy</a>, its
  <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=fetching-scripts:concept-request-render-blocking-3 data-x-internal=concept-request-render-blocking>render-blocking</a> to <var>options</var>'s
  <a href=#concept-script-fetch-options-render-blocking id=fetching-scripts:concept-script-fetch-options-render-blocking-2>render-blocking</a>, and its
  <a href=https://fetch.spec.whatwg.org/#request-priority id=fetching-scripts:concept-request-priority-3 data-x-internal=concept-request-priority>priority</a> to <var>options</var>'s
  <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-3>fetch priority</a>.</p>

  <p>To <dfn id=get-the-descendant-script-fetch-options>get the descendant script fetch options</dfn> given a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-4>script fetch options</a>
  <var>originalOptions</var>, a <a id=fetching-scripts:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, and an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object>environment settings
  object</a> <var>settingsObject</var>:</p>

  <ol><li><p>Let <var>newOptions</var> be a copy of <var>originalOptions</var>.<li><p>Let <var>integrity</var> be the result of <a href=#resolving-a-module-integrity-metadata id=fetching-scripts:resolving-a-module-integrity-metadata>resolving a module integrity
   metadata</a> with <var>url</var> and <var>settingsObject</var>.<li><p>Set <var>newOptions</var>'s <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-4>integrity metadata</a> to
   <var>integrity</var>.<li><p>Set <var>newOptions</var>'s <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-4>fetch priority</a> to "<code>auto</code>".<li><p>Return <var>newOptions</var>.</ol>

  <p>To <dfn id=resolving-a-module-integrity-metadata>resolve a module integrity
  metadata</dfn>, given a <a id=fetching-scripts:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var> and an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-2>environment settings
  object</a> <var>settingsObject</var>:</p>

  <ol><li><p>Let <var>map</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-global id=fetching-scripts:concept-settings-object-global>global object</a>'s <a href=#concept-global-import-map id=fetching-scripts:concept-global-import-map>import map</a>.<li><p>If <var>map</var>'s <a href=#concept-import-map-integrity id=fetching-scripts:concept-import-map-integrity>integrity</a>[<var>url</var>] does not <a href=https://infra.spec.whatwg.org/#map-exists id=fetching-scripts:map-exists data-x-internal=map-exists>exist</a>, then return the empty string.<li><p>Return <var>map</var>'s <a href=#concept-import-map-integrity id=fetching-scripts:concept-import-map-integrity-2>integrity</a>[<var>url</var>].</ol>

  <hr>

  <p>Several of the below algorithms can be customized with a <dfn data-dfn-for="fetching scripts" id=fetching-scripts-perform-fetch data-export="">perform the fetch
  hook</dfn> algorithm, which takes a <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-3 data-x-internal=concept-request>request</a>, a boolean <var id=fetching-scripts:fetching-scripts-is-top-level><a href=#fetching-scripts-is-top-level>isTopLevel</a></var>, and a <dfn data-dfn-for="fetching
  scripts" id=fetching-scripts-processcustomfetchresponse data-export=""><var>processCustomFetchResponse</var></dfn>
  algorithm. It runs <var id=fetching-scripts:fetching-scripts-processcustomfetchresponse><a href=#fetching-scripts-processcustomfetchresponse>processCustomFetchResponse</a></var> with a <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-3 data-x-internal=concept-response>response</a> and either null (on failure) or a <a id=fetching-scripts:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte
  sequence</a> containing the response body. <dfn data-dfn-for="fetching scripts" id=fetching-scripts-is-top-level data-export=""><var>isTopLevel</var></dfn> will be true for all <a href=#classic-script id=fetching-scripts:classic-script-4>classic
  script</a> fetches, and for the initial fetch when <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree>fetching an external module script graph</a> or <a href=#fetch-a-module-worker-script-tree id=fetching-scripts:fetch-a-module-worker-script-tree>fetching a module worker script graph</a>, but false for the fetches
  resulting from <code>import</code> statements encountered throughout the graph or from
  <code>import()</code> expressions.</p>

  <p>By default, not supplying a <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch>perform the fetch
  hook</a> will cause the below algorithms to simply <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch data-x-internal=concept-fetch>fetch</a>
  the given <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-4 data-x-internal=concept-request>request</a>, with algorithm-specific customizations
  to the <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-5 data-x-internal=concept-request>request</a> and validations of the resulting <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-4 data-x-internal=concept-response>response</a>.</p>

  <p>To layer your own customizations on top of these algorithm-specific ones, supply a <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-2>perform the fetch hook</a> that modifies the given
  <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-6 data-x-internal=concept-request>request</a>, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-2 data-x-internal=concept-fetch>fetches</a> it,
  and then performs specific validations of the resulting <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-5 data-x-internal=concept-response>response</a> (completing with a <a id=fetching-scripts:network-error href=https://fetch.spec.whatwg.org/#concept-network-error data-x-internal=network-error>network error</a> if the
  validations fail).</p>

  <p>The hook can also be used to perform more subtle customizations, such as keeping a cache of
  <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-6 data-x-internal=concept-response>responses</a> and avoiding performing a <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-3 data-x-internal=concept-fetch>fetch</a> at all.</p>

  <p class=note><cite>Service Workers</cite> is an example of a specification that runs these
  algorithms with its own options for the hook. <a href=references.html#refsSW>[SW]</a></p>

  <hr>

  <p>Now for the algorithms themselves.</p>

  <p>To <dfn id=fetch-a-classic-script data-export="">fetch a classic script</dfn> given a <a id=fetching-scripts:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an
  <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-3>environment settings object</a> <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-5>script fetch
  options</a> <var>options</var>, a <a href=urls-and-fetching.html#cors-settings-attribute id=fetching-scripts:cors-settings-attribute>CORS settings
  attribute state</a> <var>corsSetting</var>, an <a id=fetching-scripts:encoding href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> <var>encoding</var>, and
  an algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an algorithm
  accepting null (on failure) or a <a href=#classic-script id=fetching-scripts:classic-script-5>classic script</a> (on success).</p>

  <ol><li><p>Let <var>request</var> be the result of <a href=urls-and-fetching.html#create-a-potential-cors-request id=fetching-scripts:create-a-potential-cors-request>creating a potential-CORS request</a> given <var>url</var>, "<code>script</code>", and <var>corsSetting</var>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client data-x-internal=concept-request-client>client</a> to
   <var>settingsObject</var>.</p>

   <li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator
   type</a> to "<code>script</code>".</p>

   <li><p><a href=#set-up-the-classic-script-request id=fetching-scripts:set-up-the-classic-script-request>Set up the classic script request</a> given <var>request</var> and
   <var>options</var>.<li>
    <p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-4 data-x-internal=concept-fetch>Fetch</a> <var>request</var> with
    the following <i id=fetching-scripts:processresponseconsumebody><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> steps given
    <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-7 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a
    <a id=fetching-scripts:byte-sequence-2 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>:</p>

    <p class=note><var>response</var> can be either <a id=fetching-scripts:cors-same-origin href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a> or
    <a id=fetching-scripts:cors-cross-origin href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>. This only affects how error reporting happens.</p>

    <ol><li><p>Set <var>response</var> to <var>response</var>'s <a id=fetching-scripts:unsafe-response href=urls-and-fetching.html#unsafe-response>unsafe response</a>.<li>
      <p>If any of the following are true:</p>

      <ul><li><p><var>bodyBytes</var> is null or failure; or<li><p><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status data-x-internal=concept-response-status>status</a> is not an
       <a id=fetching-scripts:ok-status href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>,</ul>

      <p>then run <var>onComplete</var> given null, and abort these steps.</p>

      <p class=note>For historical reasons, this algorithm does not include MIME type checking,
      unlike the other script-fetching algorithms in this section.</p>
     <li><p>Let <var>potentialMIMETypeForEncoding</var> be the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type data-x-internal=extract-a-mime-type>extracting a MIME type</a> given <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list data-x-internal=concept-response-header-list>header list</a>.<li>
      <p>Set <var>encoding</var> to the result of <a href=https://fetch.spec.whatwg.org/#legacy-extract-an-encoding id=fetching-scripts:legacy-extract-an-encoding data-x-internal=legacy-extract-an-encoding>legacy
      extracting an encoding</a> given <var>potentialMIMETypeForEncoding</var> and
      <var>encoding</var>.</p>

      <p class=note>This intentionally ignores the <a id=fetching-scripts:mime-type-essence href=https://mimesniff.spec.whatwg.org/#mime-type-essence data-x-internal=mime-type-essence>MIME type essence</a>.</p>
     <li>
      <p>Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#decode id=fetching-scripts:decode data-x-internal=decode>decoding</a>
      <var>bodyBytes</var> to Unicode, using <var>encoding</var> as the fallback encoding.</p>

      <p class=note>The <a id=fetching-scripts:decode-2 href=https://encoding.spec.whatwg.org/#decode data-x-internal=decode>decode</a> algorithm overrides <var>encoding</var> if the file
      contains a BOM.</p>
     <li><p>Let <var>mutedErrors</var> be true if <var>response</var> was
     <a id=fetching-scripts:cors-cross-origin-2 href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>, and false otherwise.<li><p>Let <var>script</var> be the result of <a href=#creating-a-classic-script id=fetching-scripts:creating-a-classic-script>creating a classic script</a> given
     <var>sourceText</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url data-x-internal=concept-response-url>URL</a>, <var>options</var>,
     <var>mutedErrors</var>, and <var>url</var>.<li>Run <var>onComplete</var> given <var>script</var>.</ol>
   </ol>

  <p>To <dfn id=fetch-a-classic-worker-script data-export="">fetch a classic worker script</dfn> given a <a id=fetching-scripts:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an
  <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-4>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination data-x-internal=concept-request-destination>destination</a> <var>destination</var>, an
  <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-5>environment settings object</a> <var>settingsObject</var>, an algorithm
  <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-3>perform the
  fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an
  algorithm accepting null (on failure) or a <a href=#classic-script id=fetching-scripts:classic-script-6>classic script</a> (on success).</p>

  <ol><li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-7 data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client-2 data-x-internal=concept-request-client>client</a> is <var>fetchClient</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-2 data-x-internal=concept-request-destination>destination</a> is <var>destination</var>, <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type-2 data-x-internal=concept-request-initiator-type>initiator type</a> is "<code>other</code>",
   <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=fetching-scripts:concept-request-mode data-x-internal=concept-request-mode>mode</a> is "<code>same-origin</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=fetching-scripts:concept-request-credentials-mode-3 data-x-internal=concept-request-credentials-mode>credentials mode</a> is "<code>same-origin</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-4 data-x-internal=concept-request-parser-metadata>parser
   metadata</a> is "<code>not parser-inserted</code>", and whose
   <a id=fetching-scripts:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a> is set.<li>
    <p>If <var>performFetch</var> was given, run <var>performFetch</var> with <var>request</var>,
    true, and with <var>processResponseConsumeBody</var> as defined below.</p>

    <p>Otherwise, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-5 data-x-internal=concept-fetch>fetch</a> <var>request</var> with <i id=fetching-scripts:processresponseconsumebody-2><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> set to
    <var>processResponseConsumeBody</var> as defined below.</p>

    <p>In both cases, let <var>processResponseConsumeBody</var> given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-8 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a <a id=fetching-scripts:byte-sequence-3 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte
    sequence</a> <var>bodyBytes</var> be the following algorithm:</p>

    <ol><li><p>Set <var>response</var> to <var>response</var>'s <a id=fetching-scripts:unsafe-response-2 href=urls-and-fetching.html#unsafe-response>unsafe response</a>.<li>
      <p>If any of the following are true:</p>

      <ul><li><p><var>bodyBytes</var> is null or failure; or<li><p><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status-2 data-x-internal=concept-response-status>status</a> is not an
       <a id=fetching-scripts:ok-status-2 href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>,</ul>

      <p>then run <var>onComplete</var> given null, and abort these steps.</p>
     <li>
      <p>If all of the following are true:</p>

      <ul><li><p><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-2 data-x-internal=concept-response-url>URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=fetching-scripts:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is an <a id=fetching-scripts:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S) scheme</a>; and<li><p>the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type-2 data-x-internal=extract-a-mime-type>extracting a MIME type</a> from
       <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list-2 data-x-internal=concept-response-header-list>header list</a> is not
       a <a id=fetching-scripts:javascript-mime-type href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a>,</p>
      </ul>

      <p>then run <var>onComplete</var> given null, and abort these steps.</p>

      <p class=note>Other <a href=https://fetch.spec.whatwg.org/#fetch-scheme id=fetching-scripts:fetch-scheme data-x-internal=fetch-scheme>fetch schemes</a> are exempted from MIME
      type checking for historical web-compatibility reasons. We might be able to tighten this in
      the future; see <a href=https://github.com/whatwg/html/issues/3255>issue #3255</a>.</p>
     <li><p>Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#utf-8-decode id=fetching-scripts:utf-8-decode data-x-internal=utf-8-decode>UTF-8
     decoding</a> <var>bodyBytes</var>.<li><p>Let <var>script</var> be the result of <a href=#creating-a-classic-script id=fetching-scripts:creating-a-classic-script-2>creating a classic script</a> using
     <var>sourceText</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-3 data-x-internal=concept-response-url>URL</a>, and the <a href=#default-script-fetch-options id=fetching-scripts:default-script-fetch-options>default script fetch
     options</a>.<li><p>Run <var>onComplete</var> given <var>script</var>.</ol>
   </ol>

  <p>To <dfn id=fetch-a-classic-worker-imported-script data-export="">fetch a classic worker-imported script</dfn> given a <a id=fetching-scripts:url-5 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>
  <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-6>environment settings object</a> <var>settingsObject</var>, and an
  optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-4>perform the fetch hook</a>
  <var>performFetch</var>, run these steps. The algorithm will return a <a href=#classic-script id=fetching-scripts:classic-script-7>classic script</a>
  on success, or throw an exception on failure.</p>

  <ol><li><p>Let <var>response</var> be null.<li><p>Let <var>bodyBytes</var> be null.<li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-8 data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-2 data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client-3 data-x-internal=concept-request-client>client</a> is <var>settingsObject</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-3 data-x-internal=concept-request-destination>destination</a> is "<code>script</code>",
   <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type-3 data-x-internal=concept-request-initiator-type>initiator type</a> is "<code>other</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-5 data-x-internal=concept-request-parser-metadata>parser metadata</a>
   is "<code>not parser-inserted</code>", and whose <a id=fetching-scripts:use-url-credentials-flag-2 href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a>
   is set.<li>
    <p>If <var>performFetch</var> was given, run <var>performFetch</var> with <var>request</var>,
    <var>isTopLevel</var>, and with <var>processResponseConsumeBody</var> as defined below.</p>

    <p>Otherwise, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-6 data-x-internal=concept-fetch>fetch</a> <var>request</var> with <i id=fetching-scripts:processresponseconsumebody-3><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> set to
    <var>processResponseConsumeBody</var> as defined below.</p>

    <p>In both cases, let <var>processResponseConsumeBody</var> given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-9 data-x-internal=concept-response>response</a> <var>res</var> and null, failure, or a
    <a id=fetching-scripts:byte-sequence-4 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bb</var> be the following algorithm:</p>

    <ol><li><p>Set <var>bodyBytes</var> to <var>bb</var>.<li><p>Set <var>response</var> to <var>res</var>.</ol>
   <li>
    <p><a href=#pause id=fetching-scripts:pause>Pause</a> until <var>response</var> is not null.</p>

    <p class=note>Unlike other algorithms in this section, the fetching process is synchronous
    here.</p>
   <li><p>Set <var>response</var> to <var>response</var>'s <a id=fetching-scripts:unsafe-response-3 href=urls-and-fetching.html#unsafe-response>unsafe response</a>.<li>
    <p>If any of the following are true:</p>

    <ul><li><p><var>bodyBytes</var> is null or failure;<li><p><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status-3 data-x-internal=concept-response-status>status</a> is not an
     <a id=fetching-scripts:ok-status-3 href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>; or<li><p>the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type-3 data-x-internal=extract-a-mime-type>extracting a MIME type</a> from
     <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list-3 data-x-internal=concept-response-header-list>header list</a> is not a
     <a id=fetching-scripts:javascript-mime-type-2 href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a>,</p>
    </ul>

    <p>then throw a <a id=fetching-scripts:networkerror href=https://webidl.spec.whatwg.org/#networkerror data-x-internal=networkerror>"<code>NetworkError</code>"</a> <code id=fetching-scripts:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   <li><p>Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#utf-8-decode id=fetching-scripts:utf-8-decode-2 data-x-internal=utf-8-decode>UTF-8
   decoding</a> <var>bodyBytes</var>.<li><p>Let <var>mutedErrors</var> be true if <var>response</var> was
   <a id=fetching-scripts:cors-cross-origin-3 href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>, and false otherwise.<li><p>Let <var>script</var> be the result of <a href=#creating-a-classic-script id=fetching-scripts:creating-a-classic-script-3>creating a classic script</a> given
   <var>sourceText</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-4 data-x-internal=concept-response-url>URL</a>, the <a href=#default-script-fetch-options id=fetching-scripts:default-script-fetch-options-2>default script fetch options</a>, and
   <var>mutedErrors</var>.<li><p>Return <var>script</var>.</ol>

  <p>To <dfn id=fetch-a-module-script-tree data-export="">fetch an external module script graph</dfn>
  given a <a id=fetching-scripts:url-6 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-7>environment settings object</a>
  <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-6>script fetch options</a> <var>options</var>, and an
  algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an algorithm
  accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-6>module script</a> (on success).</p>

  <ol><li>
    <p><a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script>Fetch a single module script</a> given <var>url</var>, <var>settingsObject</var>,
    "<code>script</code>", <var>options</var>, <var>settingsObject</var>, "<code>client</code>", true, and with the following steps given <var>result</var>:</p>

    <ol><li><p>If <var>result</var> is null, run <var>onComplete</var> given null, and abort these
     steps.<li><p><a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script>Fetch the descendants of
     and link</a> <var>result</var> given <var>settingsObject</var>, "<code>script</code>", and <var>onComplete</var>.</ol>
   </ol>

  <p>To <dfn id=fetch-a-modulepreload-module-script-graph>fetch a modulepreload module script graph</dfn> given a <a id=fetching-scripts:url-7 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>,
  a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-4 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, an
  <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-8>environment settings object</a> <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-7>script fetch
  options</a> <var>options</var>, and an algorithm <var>onComplete</var>, run these steps.
  <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-7>module
  script</a> (on success).</p>

  <ol><li>
    <p><a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script-2>Fetch a single module script</a> given <var>url</var>, <var>settingsObject</var>,
    <var>destination</var>, <var>options</var>, <var>settingsObject</var>, "<code>client</code>", true, and with the following steps given <var>result</var>:</p>

    <ol><li><p>Run <var>onComplete</var> given <var>result</var>.<li><p><a id=fetching-scripts:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>settingsObject</var>'s <a href=#concept-settings-object-global id=fetching-scripts:concept-settings-object-global-2>global object</a> implements
     <code id=fetching-scripts:window><a href=nav-history-apis.html#window>Window</a></code>.<li>
      <p>If <var>result</var> is not null, optionally <a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-2>fetch the descendants of and link</a> <var>result</var> given
      <var>settingsObject</var>, <var>destination</var>, and an empty algorithm.</p>

      <p class=note>Generally, performing this step will be beneficial for performance, as it
      allows pre-loading the modules that will invariably be requested later, via algorithms such as
      <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree-2>fetch an external module script graph</a> that fetch the entire graph. However, user
      agents might wish to skip them in bandwidth-constrained situations, or situations where the
      relevant fetches are already in flight.</p>
     </ol>
   </ol>

  <p>To <dfn id=fetch-an-inline-module-script-graph>fetch an inline module script graph</dfn> given a <a id=fetching-scripts:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>
  <var>sourceText</var>, a <a id=fetching-scripts:url-8 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-9>environment settings
  object</a> <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-8>script fetch options</a> <var>options</var>,
  and an algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an
  algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-8>module script</a> (on success).</p>

  <ol><li><p>Let <var>script</var> be the result of <a href=#creating-a-javascript-module-script id=fetching-scripts:creating-a-javascript-module-script>creating a JavaScript module script</a>
   using <var>sourceText</var>, <var>settingsObject</var>, <var>baseURL</var>, and
   <var>options</var>.<li><p><a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-3>Fetch the descendants of
   and link</a> <var>script</var>, given <var>settingsObject</var>, "<code>script</code>", and <var>onComplete</var>.</ol>

  <p>To <dfn id=fetch-a-module-worker-script-tree data-export="">fetch a module worker script graph</dfn>
  given a <a id=fetching-scripts:url-9 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-10>environment settings object</a>
  <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-5 data-x-internal=concept-request-destination>destination</a>
  <var>destination</var>, a <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-3>credentials
  mode</a> <var>credentialsMode</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-11>environment settings object</a>
  <var>settingsObject</var>, and an algorithm <var>onComplete</var>, <a href=#fetch-a-worklet/module-worker-script-graph id=fetching-scripts:fetch-a-worklet/module-worker-script-graph>fetch a worklet/module
  worker script graph</a> given <var>url</var>, <var>fetchClient</var>, <var>destination</var>,
  <var>credentialsMode</var>, <var>settingsObject</var>, and <var>onComplete</var>.</p>

  <p>To <dfn id=fetch-a-worklet-script-graph>fetch a worklet script graph</dfn> given a <a id=fetching-scripts:url-10 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an
  <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-12>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-6 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a
  <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-4>credentials mode</a>
  <var>credentialsMode</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-13>environment settings object</a>
  <var>settingsObject</var>, a <a href=worklets.html#concept-worklet-module-responses-map id=fetching-scripts:concept-worklet-module-responses-map>module responses
  map</a> <var>moduleResponsesMap</var>, and an algorithm <var>onComplete</var>, <a href=#fetch-a-worklet/module-worker-script-graph id=fetching-scripts:fetch-a-worklet/module-worker-script-graph-2>fetch a
  worklet/module worker script graph</a> given <var>url</var>, <var>fetchClient</var>,
  <var>destination</var>, <var>credentialsMode</var>, <var>settingsObject</var>,
  <var>onComplete</var>, and the following <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-5>perform the
  fetch hook</a> given <var>request</var> and <var id=fetching-scripts:fetching-scripts-processcustomfetchresponse-2><a href=#fetching-scripts-processcustomfetchresponse>processCustomFetchResponse</a></var>:</p>

  <ol><li><p>Let <var>requestURL</var> be <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-3 data-x-internal=concept-request-url>URL</a>.<li><p>If <var>moduleResponsesMap</var>[<var>requestURL</var>] is "<code>fetching</code>", wait <a id=fetching-scripts:in-parallel href=infrastructure.html#in-parallel>in parallel</a> until that entry's value changes, then
   <a href=#queue-a-task id=fetching-scripts:queue-a-task>queue a task</a> on the <a href=#networking-task-source id=fetching-scripts:networking-task-source>networking task source</a> to proceed with running the
   following steps.<li>
    <p>If <var>moduleResponsesMap</var>[<var>requestURL</var>] <a href=https://infra.spec.whatwg.org/#map-exists id=fetching-scripts:map-exists-2 data-x-internal=map-exists>exists</a>, then:</p>

    <ol><li><p>Let <var>cached</var> be <var>moduleResponsesMap</var>[<var>requestURL</var>].<li><p>Run <var>processCustomFetchResponse</var> with <var>cached</var>[0] and
     <var>cached</var>[1].<li><p>Return.</ol>
   <li><p><a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set data-x-internal=map-set>Set</a> <var>moduleResponsesMap</var>[<var>requestURL</var>] to
   "<code>fetching</code>".<li>
    <p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-7 data-x-internal=concept-fetch>Fetch</a> <var>request</var>, with <i id=fetching-scripts:processresponseconsumebody-4><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> set to the following steps
    given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-10 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a
    <a id=fetching-scripts:byte-sequence-5 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>:</p>

    <ol><li><p>Set <var>moduleResponsesMap</var>[<var>requestURL</var>] to (<var>response</var>,
     <var>bodyBytes</var>).<li><p>Run <var>processCustomFetchResponse</var> with <var>response</var> and
     <var>bodyBytes</var>.</ol>
   </ol>

  <hr>

  <p>The following algorithms are meant for internal use by this specification only as part of <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree-3>fetching an external module script graph</a> or
  other similar concepts above, and should not be used directly by other specifications.</p>

  <p>This diagram illustrates how these algorithms relate to the ones above, as well as to each
  other:</p>

  <svg viewBox="0 0 941 166" id=module-script-fetching-diagram aria-label="Fetch an external module script, fetch a modulepreload module script graph, fetch an inline module script graph, and fetch a module worker script graph all call fetch the descendants of and link a module script." role=img>
   <defs>
    <marker markerHeight=6 id=module-script-fetching-diagram-arrow orient=auto markerWidth=6 refX=5 refY=3>
     <path d="M0,0 V6 L5,3 Z" style="fill: var(--text, CanvasText)"></path>
    </marker>
   </defs>

   <g transform=translate(0.5,0.5) class=caller>
    <rect width=180 height=50></rect>
    <foreignObject width=180 height=50>
     <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree-4 xmlns=http://www.w3.org/1999/xhtml>fetch an external module script graph</a>
    </foreignObject>
   </g>
   <path d="M90.5,50.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path>

   <g transform=translate(190.5,0.5) class=caller>
    <rect width=180 height=50></rect>
    <foreignObject width=180 height=50>
     <a href=#fetch-a-modulepreload-module-script-graph id=fetching-scripts:fetch-a-modulepreload-module-script-graph xmlns=http://www.w3.org/1999/xhtml>fetch a modulepreload module script graph</a>
    </foreignObject>
   </g>
   <path d="M280.5,50.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path>

   <g transform=translate(380.5,0.5) class=caller>
    <rect width=180 height=50></rect>
    <foreignObject width=180 height=50>
     <a href=#fetch-an-inline-module-script-graph id=fetching-scripts:fetch-an-inline-module-script-graph xmlns=http://www.w3.org/1999/xhtml>fetch an inline module script graph</a>
    </foreignObject>
   </g>
   <path d="M470.5,50.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path>

   <g transform=translate(570.5,0.5) class=caller>
    <rect width=180 height=50></rect>
    <foreignObject width=180 height=50>
     <a href=#fetch-a-module-worker-script-tree id=fetching-scripts:fetch-a-module-worker-script-tree-2 xmlns=http://www.w3.org/1999/xhtml>fetch a module worker script graph</a>
    </foreignObject>
   </g>
   <path d="M660.5,50.5 L755.5,70.5" marker-end=url(#module-script-fetching-diagram-arrow)></path>

   <g transform=translate(760.5,0.5) class=caller>
    <rect width=180 height=50></rect>
    <foreignObject width=180 height=50>
     <a href=#fetch-a-worklet-script-graph id=fetching-scripts:fetch-a-worklet-script-graph xmlns=http://www.w3.org/1999/xhtml>fetch a worklet script graph</a>
    </foreignObject>
   </g>
   <path d="M850.5,50.5 L755.5,70.5" marker-end=url(#module-script-fetching-diagram-arrow)></path>

   <g transform=translate(665.5,70.5) class=caller>
    <rect width=180 height=50></rect>
    <foreignObject width=180 height=50>
     <a href=#fetch-a-worklet/module-worker-script-graph id=fetching-scripts:fetch-a-worklet/module-worker-script-graph-3 xmlns=http://www.w3.org/1999/xhtml>fetch a worklet/module worker script graph</a>
    </foreignObject>
   </g>
   <path d="M755.5,120.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path>

   <g transform=translate(260.5,140.5) class=subalgorithm>
    <rect width=420 height=25></rect>
    <foreignObject width=420 height=25>
     <a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-4 xmlns=http://www.w3.org/1999/xhtml>fetch the descendants of and link a module script</a>
    </foreignObject>
   </g>
  </svg>

  <p>To <dfn id=fetch-a-worklet/module-worker-script-graph>fetch a worklet/module worker script graph</dfn> given a <a id=fetching-scripts:url-11 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>
  <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-14>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-7 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-5>credentials mode</a>
  <var>credentialsMode</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-15>environment settings object</a> <var>settingsObject</var>,
  an algorithm <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-6>perform the fetch hook</a> <var>performFetch</var>, run
  these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a
  <a href=#module-script id=fetching-scripts:module-script-9>module script</a> (on success).</p>

  <ol><li><p>Let <var>options</var> be a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-9>script fetch options</a> whose <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce-4>cryptographic nonce</a> is the empty string, <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-5>integrity metadata</a> is the empty string,
   <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser-4>parser metadata</a> is "<code>not-parser-inserted</code>", <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-6>credentials mode</a> is
   <var>credentialsMode</var>, <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-4>referrer
   policy</a> is the empty string, and <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-5>fetch priority</a> is "<code>auto</code>".</p>

   <li>
    <p><a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script-3>Fetch a single module script</a> given <var>url</var>,
    <var>fetchClient</var>, <var>destination</var>, <var>options</var>, <var>settingsObject</var>,
    "<code>client</code>", true, and <var>onSingleFetchComplete</var> as defined below. If
    <var>performFetch</var> was given, pass it along as well.</p>

    <p><var>onSingleFetchComplete</var> given <var>result</var> is the following algorithm:</p>

    <ol><li><p>If <var>result</var> is null, run <var>onComplete</var> given null, and abort these
     steps.<li><p><a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-5>Fetch the descendants
     of and link</a> <var>result</var> given <var>fetchClient</var>,
     <var>destination</var>, and <var>onComplete</var>. If <var>performFetch</var> was given, pass
     it along as well.</ol>
   </ol>

  <p>To <dfn id=fetch-the-descendants-of-and-link-a-module-script>fetch the descendants of and
  link</dfn> a <a href=#module-script id=fetching-scripts:module-script-10>module script</a> <var>moduleScript</var>, given an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-16>environment
  settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-8 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, an algorithm
  <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-7>perform the
  fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an
  algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-11>module script</a> (on success).</p>

  <ol><li><p>Let <var>record</var> be <var>moduleScript</var>'s <a href=#concept-script-record id=fetching-scripts:concept-script-record>record</a>.<li>
    <p>If <var>record</var> is null, then:</p>

    <ol><li><p>Set <var>moduleScript</var>'s <a href=#concept-script-error-to-rethrow id=fetching-scripts:concept-script-error-to-rethrow>error to
     rethrow</a> to <var>moduleScript</var>'s <a id=fetching-scripts:parse-errors href=parsing.html#parse-errors>parse error</a>.<li><p>Run <var>onComplete</var> given <var>moduleScript</var>.<li><p>Return.</ol>
   <li><p>Let <var>state</var> be <a id=fetching-scripts:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> { [[ErrorToRethrow]]: null, [[Destination]]:
   <var>destination</var>, [[PerformFetch]]: null, [[FetchClient]]: <var>fetchClient</var>
   }.<li><p>If <var>performFetch</var> was given, set <var>state</var>.[[PerformFetch]] to
   <var>performFetch</var>.<li>
    <p>Let <var>loadingPromise</var> be <var>record</var>.<a href=https://tc39.es/ecma262/#sec-LoadRequestedModules id=fetching-scripts:js-loadrequestedmodules data-x-internal=js-loadrequestedmodules>LoadRequestedModules</a>(<var>state</var>).</p>

    <p class=note>This step will recursively load all the module transitive dependencies.</p>
   <li>
    <p><a id=fetching-scripts:upon-fulfillment href=https://webidl.spec.whatwg.org/#upon-fulfillment data-x-internal=upon-fulfillment>Upon fulfillment</a> of <var>loadingPromise</var>, run the following steps:</p>

    <ol><li>
      <p>Perform <var>record</var>.<a href=https://tc39.es/ecma262/#sec-moduledeclarationlinking id=fetching-scripts:js-link data-x-internal=js-link>Link</a>().</p>

      <p class=note>This step will recursively call <a href=https://tc39.es/ecma262/#sec-moduledeclarationlinking id=fetching-scripts:js-link-2 data-x-internal=js-link>Link</a> on all of
      the module's unlinked dependencies.</p>

      <p>If this throws an exception, catch it, and set <var>moduleScript</var>'s <a href=#concept-script-error-to-rethrow id=fetching-scripts:concept-script-error-to-rethrow-2>error to rethrow</a> to that exception.</p>
     <li><p>Run <var>onComplete</var> given <var>moduleScript</var>.</ol>
   <li>
    <p><a id=fetching-scripts:upon-rejection href=https://webidl.spec.whatwg.org/#upon-rejection data-x-internal=upon-rejection>Upon rejection</a> of <var>loadingPromise</var>, run the
    following steps:</p>

    <ol><li><p>If <var>state</var>.[[ErrorToRethrow]] is not null, set <var>moduleScript</var>'s <a href=#concept-script-error-to-rethrow id=fetching-scripts:concept-script-error-to-rethrow-3>error to rethrow</a> to
     <var>state</var>.[[ErrorToRethrow]] and run <var>onComplete</var> given
     <var>moduleScript</var>.<li>
      <p>Otherwise, run <var>onComplete</var> given null.</p>

      <p class=note><var>state</var>.[[ErrorToRethrow]] is null when <var>loadingPromise</var> is
      rejected due to a loading error.</p>
     </ol>
   </ol>

  <p>To <dfn id=fetch-a-single-module-script>fetch a single module script</dfn>, given a <a id=fetching-scripts:url-12 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an
  <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-17>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-9 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-10>script
  fetch options</a> <var>options</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-18>environment settings object</a>
  <var>settingsObject</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-referrer id=fetching-scripts:concept-request-referrer data-x-internal=concept-request-referrer>referrer</a>
  <var>referrer</var>, an optional <a id=fetching-scripts:modulerequest-record href=https://tc39.es/ecma262/#modulerequest-record data-x-internal=modulerequest-record>ModuleRequest Record</a> <var>moduleRequest</var>, a
  boolean <var id=fetching-scripts:fetching-scripts-is-top-level-2><a href=#fetching-scripts-is-top-level>isTopLevel</a></var>, an algorithm
  <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-8>perform the
  fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an
  algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-12>module script</a> (on success).</p>

  <ol><li><p>Let <var>moduleType</var> be "<code>javascript-or-wasm</code>".<li><p>If <var>moduleRequest</var> was given, then set <var>moduleType</var> to the result of
   running the <a href=#module-type-from-module-request id=fetching-scripts:module-type-from-module-request>module type from module request</a> steps given
   <var>moduleRequest</var>.<li><p><a id=fetching-scripts:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: the result of running the <a href=#module-type-allowed id=fetching-scripts:module-type-allowed>module type allowed</a> steps
   given <var>moduleType</var> and <var>settingsObject</var> is true. Otherwise, we would not have
   reached this point because a failure would have been raised when inspecting
   <var>moduleRequest</var>.[[Attributes]] in <a href=#validate-requested-module-specifiers>
   HostLoadImportedModule</a> or <a href=#fetch-a-single-imported-module-script id=fetching-scripts:fetch-a-single-imported-module-script>fetch a single imported module script</a>.<li><p>Let <var>moduleMap</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-module-map id=fetching-scripts:concept-settings-object-module-map>module map</a>.<li><p>If <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)] is
   "<code>fetching</code>", wait <a id=fetching-scripts:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a> until that entry's value
   changes, then <a href=#queue-a-task id=fetching-scripts:queue-a-task-2>queue a task</a> on the <a href=#networking-task-source id=fetching-scripts:networking-task-source-2>networking task source</a> to proceed
   with running the following steps.<li><p>If <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)] <a href=https://infra.spec.whatwg.org/#map-exists id=fetching-scripts:map-exists-3 data-x-internal=map-exists>exists</a>, run <var>onComplete</var> given
   <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)], and return.<li><p><a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set-2 data-x-internal=map-set>Set</a> <var>moduleMap</var>[(<var>url</var>,
   <var>moduleType</var>)] to "<code>fetching</code>".<li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-9 data-x-internal=concept-request>request</a> whose
   <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-4 data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=fetching-scripts:concept-request-mode-2 data-x-internal=concept-request-mode>mode</a> is "<code>cors</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-referrer id=fetching-scripts:concept-request-referrer-2 data-x-internal=concept-request-referrer>referrer</a> is <var>referrer</var>, and <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client-4 data-x-internal=concept-request-client>client</a> is <var>fetchClient</var>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-10 data-x-internal=concept-request-destination>destination</a> to
   the result of running the <a href=#fetch-destination-from-module-type id=fetching-scripts:fetch-destination-from-module-type>fetch destination from module type</a> steps given
   <var>destination</var> and <var>moduleType</var>.<li><p>If <var>destination</var> is "<code>worker</code>", "<code>sharedworker</code>", or "<code>serviceworker</code>", and
   <var>isTopLevel</var> is true, then set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=fetching-scripts:concept-request-mode-3 data-x-internal=concept-request-mode>mode</a> to "<code>same-origin</code>".<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type-4 data-x-internal=concept-request-initiator-type>initiator
   type</a> to "<code>script</code>".</p>

   <li><p><a href=#set-up-the-module-script-request id=fetching-scripts:set-up-the-module-script-request>Set up the module script request</a> given <var>request</var> and
   <var>options</var>.<li>
    <p>If <var>performFetch</var> was given, run <var>performFetch</var> with <var>request</var>,
    <var>isTopLevel</var>, and with <var>processResponseConsumeBody</var> as defined below.</p>

    <p>Otherwise, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-8 data-x-internal=concept-fetch>fetch</a> <var>request</var> with <i id=fetching-scripts:processresponseconsumebody-5><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> set to
    <var>processResponseConsumeBody</var> as defined below.</p>

    <p>In both cases, let <var>processResponseConsumeBody</var> given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-11 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a
    <a id=fetching-scripts:byte-sequence-6 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var> be the following algorithm:</p>

    <p class=note><var>response</var> is always <a id=fetching-scripts:cors-same-origin-2 href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a>.</p>

    <ol><li>
      <p>If any of the following are true:</p>

      <ul><li><p><var>bodyBytes</var> is null or failure; or<li><p><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status-4 data-x-internal=concept-response-status>status</a> is not an
       <a id=fetching-scripts:ok-status-4 href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>,</ul>

      <p>then <a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set-3 data-x-internal=map-set>set</a> <var>moduleMap</var>[(<var>url</var>,
      <var>moduleType</var>)] to null, run <var>onComplete</var> given null, and abort these
      steps.</p>
     <li><p>Let <var>mimeType</var> be the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type-4 data-x-internal=extract-a-mime-type>extracting
     a MIME type</a> from <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list-4 data-x-internal=concept-response-header-list>header list</a>.<li><p>Let <var>moduleScript</var> be null.<li><p>Let <var>referrerPolicy</var> be the result of <a href=https://w3c.github.io/webappsec-referrer-policy/#parse-referrer-policy-from-header id=fetching-scripts:parse-referrer-policy-header-2 data-x-internal=parse-referrer-policy-header>parsing the `<code>Referrer-Policy</code>` header</a>
     given <var>response</var>. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a><li><p>If <var>referrerPolicy</var> is not the empty string, set <var>options</var>'s <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-5>referrer policy</a> to
     <var>referrerPolicy</var>.<li><p>If <var>mimeType</var>'s <a href=https://mimesniff.spec.whatwg.org/#mime-type-essence id=fetching-scripts:mime-type-essence-2 data-x-internal=mime-type-essence>essence</a> is
     "<code id=fetching-scripts:application/wasm><a href=indices.html#application/wasm>application/wasm</a></code>" and <var>moduleType</var> is "<code>javascript-or-wasm</code>", then set <var>moduleScript</var> to the result of
     <a href=#creating-a-webassembly-module-script id=fetching-scripts:creating-a-webassembly-module-script>creating a WebAssembly module script</a> given <var>bodyBytes</var>,
     <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-5 data-x-internal=concept-response-url>URL</a>, and <var>options</var>.<li>
      <p>Otherwise:</p>
      <ol><li><p>Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#utf-8-decode id=fetching-scripts:utf-8-decode-3 data-x-internal=utf-8-decode>UTF-8
       decoding</a> <var>bodyBytes</var>.<li><p>If <var>mimeType</var> is a <a id=fetching-scripts:javascript-mime-type-3 href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a> and <var>moduleType</var>
       is "<code>javascript-or-wasm</code>", then set <var>moduleScript</var> to the result of
       <a href=#creating-a-javascript-module-script id=fetching-scripts:creating-a-javascript-module-script-2>creating a JavaScript module script</a> given <var>sourceText</var>,
       <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-6 data-x-internal=concept-response-url>URL</a>, and <var>options</var>.<li><p>If the <a id=fetching-scripts:mime-type-essence-3 href=https://mimesniff.spec.whatwg.org/#mime-type-essence data-x-internal=mime-type-essence>MIME type essence</a> of <var>mimeType</var> is "<code id=fetching-scripts:text/css><a href=indices.html#text/css>text/css</a></code>"
       and <var>moduleType</var> is "<code>css</code>", then set <var>moduleScript</var> to
       the result of <a href=#creating-a-css-module-script id=fetching-scripts:creating-a-css-module-script>creating a CSS module script</a> given <var>sourceText</var> and
       <var>settingsObject</var>.<li><p>If <var>mimeType</var> is a <a id=fetching-scripts:json-mime-type href=https://mimesniff.spec.whatwg.org/#json-mime-type data-x-internal=json-mime-type>JSON MIME type</a> and
       <var>moduleType</var> is "<code>json</code>", then set <var>moduleScript</var> to
       the result of <a href=#creating-a-json-module-script id=fetching-scripts:creating-a-json-module-script>creating a JSON module script</a> given <var>sourceText</var> and
       <var>settingsObject</var>.</ol>
     <li>
      <p><a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set-4 data-x-internal=map-set>Set</a> <var>moduleMap</var>[(<var>url</var>,
      <var>moduleType</var>)] to <var>moduleScript</var>, and run <var>onComplete</var> given
      <var>moduleScript</var>.</p>

      <p class=note>It is intentional that the <a href=#module-map id=fetching-scripts:module-map>module map</a> is keyed by the <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-5 data-x-internal=concept-request-url>request URL</a>, whereas the <a href=#concept-script-base-url id=fetching-scripts:concept-script-base-url>base URL</a> for the <a href=#module-script id=fetching-scripts:module-script-13>module script</a> is
      set to the <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-7 data-x-internal=concept-response-url>response URL</a>. The former is used to
      deduplicate fetches, while the latter is used for URL resolution.</p>
     </ol>
   </ol>

  <p>To <dfn id=fetch-a-single-imported-module-script>fetch a single imported module script</dfn>, given a <a id=fetching-scripts:url-13 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>,
  an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-19>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-11 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-11>script
  fetch options</a> <var>options</var>, <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-20>environment settings object</a>
  <var>settingsObject</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-referrer id=fetching-scripts:concept-request-referrer-3 data-x-internal=concept-request-referrer>referrer</a>
  <var>referrer</var>, a <a id=fetching-scripts:modulerequest-record-2 href=https://tc39.es/ecma262/#modulerequest-record data-x-internal=modulerequest-record>ModuleRequest Record</a> <var>moduleRequest</var>, an
  algorithm <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-9>perform the fetch hook</a> <var>performFetch</var>, run
  these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a
  <a href=#module-script id=fetching-scripts:module-script-14>module script</a> (on success).</p>

  <ol><li><p><a id=fetching-scripts:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>moduleRequest</var>.[[Attributes]] does not contain any
   <a id=fetching-scripts:record-2 href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> <var>entry</var> such that <var>entry</var>.[[Key]] is not "<code>type</code>", because we only asked for "<code>type</code>" attributes in
   <a href=#hostgetsupportedimportattributes id=fetching-scripts:hostgetsupportedimportattributes>HostGetSupportedImportAttributes</a>.<li><p>Let <var>moduleType</var> be the result of running the <a href=#module-type-from-module-request id=fetching-scripts:module-type-from-module-request-2>module type from module
   request</a> steps given <var>moduleRequest</var>.<li><p>If the result of running the <a href=#module-type-allowed id=fetching-scripts:module-type-allowed-2>module type allowed</a> steps given
   <var>moduleType</var> and <var>settingsObject</var> is false, then run <var>onComplete</var>
   given null, and return.<li><p><a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script-4>Fetch a single module script</a> given <var>url</var>, <var>fetchClient</var>,
   <var>destination</var>, <var>options</var>, <var>settingsObject</var>, <var>referrer</var>,
   <var>moduleRequest</var>, false, and <var>onComplete</var>. If <var>performFetch</var> was given,
   pass it along as well.</ol>

  <h5 id=creating-scripts><span class=secno>8.1.4.3</span> Creating scripts<a href=#creating-scripts class=self-link></a></h5>

  <p>To <dfn id=creating-a-classic-script>create a classic script</dfn>, given a
  <a id=creating-scripts:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>source</var>, an <a href=#environment-settings-object id=creating-scripts:environment-settings-object>environment settings object</a>
  <var>settings</var>, a <a id=creating-scripts:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, a <a href=#script-fetch-options id=creating-scripts:script-fetch-options>script fetch options</a>
  <var>options</var>, an optional boolean <var>mutedErrors</var> (default false), and an optional
  <a id=creating-scripts:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null <var>sourceURLForWindowScripts</var> (default null):</p>

  <ol><li>
    <p>If <var>mutedErrors</var> is true, then set <var>baseURL</var> to
    <code id=creating-scripts:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code>.</p>

    <p class=note>When <var>mutedErrors</var> is true, <var>baseURL</var> is the script's
    <a id=creating-scripts:cors-cross-origin href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a> <a href=https://fetch.spec.whatwg.org/#concept-response id=creating-scripts:concept-response data-x-internal=concept-response>response</a>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=creating-scripts:concept-response-url data-x-internal=concept-response-url>url</a>, which shouldn't be exposed to JavaScript. Therefore,
    <var>baseURL</var> is sanitized here.</p>
   <li><p>If <a href=#concept-environment-noscript id=creating-scripts:concept-environment-noscript>scripting is disabled</a> for
   <var>settings</var>, then set <var>source</var> to the empty string.<li><p>Let <var>script</var> be a new <a href=#classic-script id=creating-scripts:classic-script>classic script</a> that this algorithm will
   subsequently initialize.<li><p>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object>settings
   object</a> to <var>settings</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url>base URL</a> to
   <var>baseURL</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options>fetch
   options</a> to <var>options</var>.<li><p>Set <var>script</var>'s <a href=#muted-errors id=creating-scripts:muted-errors>muted errors</a> to <var>mutedErrors</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error>parse error</a> and
   <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow>error to rethrow</a> to null.<li><p><a id=creating-scripts:record-classic-script-creation-time href=https://w3c.github.io/long-animation-frames/#record-classic-script-creation-time data-x-internal=record-classic-script-creation-time>Record classic script creation time</a> given <var>script</var> and
   <var>sourceURLForWindowScripts</var>.<li>
    <p>Let <var>result</var> be <a href=https://tc39.es/ecma262/#sec-parse-script id=creating-scripts:js-parsescript data-x-internal=js-parsescript>ParseScript</a>(<var>source</var>,
    <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm">realm</a>,
    <var>script</var>).</p>

    <p class=note>Passing <var>script</var> as the last parameter here ensures
    <var>result</var>.[[HostDefined]] will be <var>script</var>.</p>
   <li>
    <p>If <var>result</var> is a <a id=creating-scripts:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of errors, then:

    <ol><li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-2>parse error</a> and
     its <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-2>error to rethrow</a> to
     <var>result</var>[0].<li><p>Return <var>script</var>.</ol>
   <li><p>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record>record</a> to
   <var>result</var>.<li><p>Return <var>script</var>.</ol>

  <p>To <dfn id=creating-a-javascript-module-script>create a JavaScript module script</dfn>,
  given a <a id=creating-scripts:string-2 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>source</var>, an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-2>environment settings
  object</a> <var>settings</var>, a <a id=creating-scripts:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, and a <a href=#script-fetch-options id=creating-scripts:script-fetch-options-2>script fetch
  options</a> <var>options</var>:</p>

  <ol><li><p>If <a href=#concept-environment-noscript id=creating-scripts:concept-environment-noscript-2>scripting is disabled</a> for
   <var>settings</var>, then set <var>source</var> to the empty string.<li><p>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script>module script</a> that this algorithm will
   subsequently initialize.<li><p>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-2>settings
   object</a> to <var>settings</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-2>base URL</a> to
   <var>baseURL</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-2>fetch
   options</a> to <var>options</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-3>parse error</a> and
   <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-3>error to rethrow</a> to null.<li>
    <p>Let <var>result</var> be <a href=https://tc39.es/ecma262/#sec-parsemodule id=creating-scripts:js-parsemodule data-x-internal=js-parsemodule>ParseModule</a>(<var>source</var>,
    <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm-2">realm</a>,
    <var>script</var>).</p>

    <p class=note>Passing <var>script</var> as the last parameter here ensures
    <var>result</var>.[[HostDefined]] will be <var>script</var>.</p>
   <li>
    <p>If <var>result</var> is a <a id=creating-scripts:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of errors, then:</p>

    <ol><li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-4>parse error</a> to
     <var>result</var>[0].<li><p>Return <var>script</var>.</ol>
   <li><p>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-2>record</a> to
   <var>result</var>.<li><p>Return <var>script</var>.</ol>

  <p>To <dfn id=creating-a-webassembly-module-script>create a WebAssembly module script</dfn>,
  given a <a id=creating-scripts:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>, an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-3>environment settings
  object</a> <var>settings</var>, a <a id=creating-scripts:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, and a <a href=#script-fetch-options id=creating-scripts:script-fetch-options-3>script fetch
  options</a> <var>options</var>:</p>

  <ol><li>
    <p>If <a href=#concept-environment-noscript id=creating-scripts:concept-environment-noscript-3>scripting is disabled</a> for
    <var>settings</var>, then set <var>bodyBytes</var> to the byte sequence 0x00 0x61 0x73 0x6D 0x01
    0x00 0x00 0x00.</p>

    <p class=note>This byte sequence corresponds to an empty WebAssembly module with only the magic
    bytes and version number provided.</p>
   <li><p>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script-2>module script</a> that this algorithm will
   subsequently initialize.<li><p>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-3>settings
   object</a> to <var>settings</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-3>base URL</a> to
   <var>baseURL</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-3>fetch
   options</a> to <var>options</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-5>parse error</a> and
   <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-4>error to rethrow</a> to null.<li>
    <p>Let <var>result</var> be the result of <a href=https://webassembly.github.io/esm-integration/js-api/index.html#parse-a-webassembly-module id=creating-scripts:parse-a-webassembly-module data-x-internal=parse-a-webassembly-module>parsing a
    WebAssembly module</a> given <var>bodyBytes</var>,
    <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm-3">realm</a>, and
    <var>script</var>.</p>

    <p class=note>Passing <var>script</var> as the last parameter here ensures
    <var>result</var>.[[HostDefined]] will be <var>script</var>.</p>
   <li>
    <p>If the previous step threw an error <var>error</var>, then:</p>

    <ol><li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-6>parse error</a> to
     <var>error</var>.<li><p>Return <var>script</var>.</ol>
   <li><p>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-3>record</a> to
   <var>result</var>.<li><p>Return <var>script</var>.</ol>

  <p class=note><cite>WebAssembly JavaScript Interface: ESM Integration</cite> specifies the
  hooks for the WebAssembly integration with ECMA-262 module loading. This includes support both
  for direct dependency imports, as well as for source phase imports, which support virtualization
  and multi-instantiation. <a href=references.html#refsWASMESM>[WASMESM]</a></p>

  <p>To <dfn id=creating-a-css-module-script>create a CSS module script</dfn>, given a
  string <var>source</var> and an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-4>environment settings object</a> <var>settings</var>:</p>

  <ol><li><p>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script-3>module script</a> that this algorithm will
   subsequently initialize.<li><p>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-4>settings
   object</a> to <var>settings</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-4>base URL</a> and
   <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-4>fetch options</a> to null.<li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-7>parse error</a> and
   <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-5>error to rethrow</a> to null.<li><p>Let <var>sheet</var> be the result of running the steps to <a id=creating-scripts:create-a-constructed-cssstylesheet href=https://drafts.csswg.org/cssom/#create-a-constructed-cssstylesheet data-x-internal=create-a-constructed-cssstylesheet>create a constructed
   <code>CSSStyleSheet</code></a> with an empty dictionary as the argument.<li>
    <p>Run the steps to <a id=creating-scripts:synchronously-replace-the-rules-of-a-cssstylesheet href=https://drafts.csswg.org/cssom/#synchronously-replace-the-rules-of-a-cssstylesheet data-x-internal=synchronously-replace-the-rules-of-a-cssstylesheet>synchronously replace the rules of a <code>CSSStyleSheet</code></a>
    on <var>sheet</var> given <var>source</var>.</p>

    <p>If this throws an exception, catch it, and set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-8>parse error</a> to that exception, and return
    <var>script</var>.</p>

    <p class=note>The steps to <a id=creating-scripts:synchronously-replace-the-rules-of-a-cssstylesheet-2 href=https://drafts.csswg.org/cssom/#synchronously-replace-the-rules-of-a-cssstylesheet data-x-internal=synchronously-replace-the-rules-of-a-cssstylesheet>synchronously replace the rules of a
    <code>CSSStyleSheet</code></a> will throw if <var>source</var> contains any <code>@import</code> rules.  This is by-design for now because there is not yet an
    agreement on how to handle these for CSS module scripts; therefore they are blocked altogether
    until a consensus is reached.</p>
   <li><p>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-4>record</a> to the result
   of <a id=creating-scripts:createdefaultexportsyntheticmodule href=https://tc39.es/ecma262/#sec-create-default-export-synthetic-module data-x-internal=createdefaultexportsyntheticmodule>CreateDefaultExportSyntheticModule</a>(<var>sheet</var>).<li><p>Return <var>script</var>.</ol>

  <p>To <dfn id=creating-a-json-module-script>create a JSON module script</dfn>, given a
  string <var>source</var> and an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-5>environment settings object</a> <var>settings</var>:</p>

  <ol><li><p>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script-4>module script</a> that this algorithm will
   subsequently initialize.<li><p>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-5>settings
   object</a> to <var>settings</var>.<li><p>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-5>base URL</a> and
   <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-5>fetch options</a> to null.<li><p>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-9>parse error</a> and
   <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-6>error to rethrow</a> to null.<li>
    <p>Let <var>result</var> be <a id=creating-scripts:parsejsonmodule href=https://tc39.es/ecma262/#sec-parse-json-module data-x-internal=parsejsonmodule>ParseJSONModule</a>(<var>source</var>).</p>

    <p>If this throws an exception, catch it, and set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-10>parse error</a> to that exception, and return
    <var>script</var>.</p>
   <li><p>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-5>record</a> to
   <var>result</var>.<li><p>Return <var>script</var>.</ol>

  <p>The <dfn id=module-type-from-module-request>module type from module request</dfn> steps, given a <a id=creating-scripts:modulerequest-record href=https://tc39.es/ecma262/#modulerequest-record data-x-internal=modulerequest-record>ModuleRequest
  Record</a> <var>moduleRequest</var>, are as follows:</p>

  <ol><li><p>Let <var>moduleType</var> be "<code>javascript-or-wasm</code>".<li>
    <p>If <var>moduleRequest</var>.[[Attributes]] has a <a id=creating-scripts:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> <var>entry</var> such
    that <var>entry</var>.[[Key]] is "<code>type</code>", then:</p>

    <ol><li>
      <p>If <var>entry</var>.[[Value]] is "<code>javascript-or-wasm</code>", then set
      <var>moduleType</var> to null.</p>

      <p class=note>This specification uses the "<code>javascript-or-wasm</code>" module
      type internally for <a href=#javascript-module-script id=creating-scripts:javascript-module-script>JavaScript module scripts</a> or
      <a href=#webassembly-module-script id=creating-scripts:webassembly-module-script>WebAssembly module scripts</a>, so this step is
      needed to prevent modules from being imported using a
      "<code>javascript-or-wasm</code>" type attribute (a null <var>moduleType</var> will
      cause the <a href=#module-type-allowed id=creating-scripts:module-type-allowed>module type allowed</a> check to fail).</p>
     <li><p>Otherwise, set <var>moduleType</var> to <var>entry</var>.[[Value]].</ol>
   <li><p>Return <var>moduleType</var>.</ol>

  <p>The <dfn id=module-type-allowed>module type allowed</dfn> steps, given a <a id=creating-scripts:string-3 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>moduleType</var>
  and an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-6>environment settings object</a> <var>settings</var>, are as follows:</p>

  <ol><li><p>If <var>moduleType</var> is not "<code>javascript-or-wasm</code>", "<code>css</code>", or "<code>json</code>", then return false.<li><p>If <var>moduleType</var> is "<code>css</code>" and the
   <code id=creating-scripts:cssstylesheet><a data-x-internal=cssstylesheet href=https://drafts.csswg.org/cssom/#the-cssstylesheet-interface>CSSStyleSheet</a></code> interface is not <a href=https://webidl.spec.whatwg.org/#dfn-exposed id=creating-scripts:idl-exposed data-x-internal=idl-exposed>exposed</a> in
   <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm-4">realm</a>, then
   return false.<li><p>Return true.</ol>

  <p>The <dfn id=fetch-destination-from-module-type>fetch destination from module type</dfn> steps, given a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=creating-scripts:concept-request-destination data-x-internal=concept-request-destination>destination</a> <var>defaultDestination</var> and a
  <a id=creating-scripts:string-4 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>moduleType</var>, are as follows:</p>

  <ol><li>If <var>moduleType</var> is "<code>json</code>", then return "<code>json</code>".<li>If <var>moduleType</var> is "<code>css</code>", then return "<code>style</code>".<li>Return <var>defaultDestination</var>.</ol>

  <h5 id=calling-scripts><span class=secno>8.1.4.4</span> Calling scripts<a href=#calling-scripts class=self-link></a></h5>

  <p>To <dfn id=run-a-classic-script data-export="">run a classic script</dfn> given a <a href=#classic-script id=calling-scripts:classic-script>classic script</a> <var>script</var>
  and an optional boolean <var>rethrow errors</var> (default false):</p>

  <ol><li><p>Let <var>settings</var> be the <a href=#settings-object id=calling-scripts:settings-object>settings
   object</a> of <var>script</var>.<li><p><a href=#check-if-we-can-run-script id=calling-scripts:check-if-we-can-run-script>Check if we can run script</a> with <var>settings</var>. If this returns "do
   not run", then return <a id=calling-scripts:normalcompletion href=https://tc39.es/ecma262/#sec-normalcompletion data-x-internal=normalcompletion>NormalCompletion</a>(empty).<li><p><a id=calling-scripts:record-classic-script-execution-start-time href=https://w3c.github.io/long-animation-frames/#record-classic-script-execution-start-time data-x-internal=record-classic-script-execution-start-time>Record classic script execution start time</a> given <var>script</var>.<li><p><a href=#prepare-to-run-script id=calling-scripts:prepare-to-run-script>Prepare to run script</a> given <var>settings</var>.<li><p>Let <var>evaluationStatus</var> be null.<li><p>If <var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow>error to
   rethrow</a> is not null, then set <var>evaluationStatus</var> to
   <a id=calling-scripts:throwcompletion href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(<var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow-2>error to rethrow</a>).<li>
    <p>Otherwise, set <var>evaluationStatus</var> to <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=calling-scripts:js-scriptevaluation data-x-internal=js-scriptevaluation>ScriptEvaluation</a>(<var>script</var>'s <a href=#concept-script-record id=calling-scripts:concept-script-record>record</a>).</p>

    <p>If <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=calling-scripts:js-scriptevaluation-2 data-x-internal=js-scriptevaluation>ScriptEvaluation</a> does not complete because the
    user agent has <a href=#abort-a-running-script id=calling-scripts:abort-a-running-script>aborted the running script</a>, leave
    <var>evaluationStatus</var> as null.</p>
   <li>
    <p>If <var>evaluationStatus</var> is an <a href=https://tc39.es/ecma262/#sec-completion-record-specification-type id=calling-scripts:completion-record data-x-internal=completion-record>abrupt
    completion</a>, then:</p>

    <ol><li>
      <p>If <var>rethrow errors</var> is true and <var>script</var>'s <a href=#muted-errors id=calling-scripts:muted-errors>muted
      errors</a> is false, then:</p>

      <ol><li><p><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script>Clean up after running script</a> with <var>settings</var>.<li><p>Rethrow <var>evaluationStatus</var>.[[Value]].</ol>

     <li>
      <p>If <var>rethrow errors</var> is true and <var>script</var>'s <a href=#muted-errors id=calling-scripts:muted-errors-2>muted
      errors</a> is true, then:</p>

      <ol><li><p><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-2>Clean up after running script</a> with <var>settings</var>.<li><p>Throw a <a id=calling-scripts:networkerror href=https://webidl.spec.whatwg.org/#networkerror data-x-internal=networkerror>"<code>NetworkError</code>"</a> <code id=calling-scripts:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</ol>
     <li>
      <p>Otherwise, <var>rethrow errors</var> is false. Perform the following steps:</p>

      <ol><li><p><a href=#report-an-exception id=calling-scripts:report-an-exception>Report an exception</a> given by <var>evaluationStatus</var>.[[Value]] for
       <var>script</var>'s <a href=#settings-object id=calling-scripts:settings-object-2>settings object</a>'s
       <a href=#concept-settings-object-global id=calling-scripts:concept-settings-object-global>global object</a>.<li><p><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-3>Clean up after running script</a> with <var>settings</var>.<li><p>Return <var>evaluationStatus</var>.</ol>
     </ol>
   <li><p><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-4>Clean up after running script</a> with <var>settings</var>.<li><p>If <var>evaluationStatus</var> is a normal completion, then return
   <var>evaluationStatus</var>.<li><p>If we've reached this point, <var>evaluationStatus</var> was left as null because the
   script was <a href=#abort-a-running-script id=calling-scripts:abort-a-running-script-2>aborted prematurely</a> during evaluation.
   Return <a id=calling-scripts:throwcompletion-2 href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(a new <a id=calling-scripts:quotaexceedederror href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a>
   <code id=calling-scripts:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>).
   </ol>

  <p>To <dfn id=run-a-module-script data-export="">run a module script</dfn> given a <a href=#module-script id=calling-scripts:module-script>module script</a> <var>script</var>
  and an optional boolean <var>preventErrorReporting</var> (default false):</p>

  <ol><li><p>Let <var>settings</var> be the <a href=#settings-object id=calling-scripts:settings-object-3>settings
   object</a> of <var>script</var>.<li><p><a href=#check-if-we-can-run-script id=calling-scripts:check-if-we-can-run-script-2>Check if we can run script</a> with <var>settings</var>. If this returns "do not
   run", then return <a id=calling-scripts:a-promise-resolved-with href=https://webidl.spec.whatwg.org/#a-promise-resolved-with data-x-internal=a-promise-resolved-with>a promise resolved with</a> undefined.<li><p><a id=calling-scripts:record-module-script-execution-start-time href=https://w3c.github.io/long-animation-frames/#record-module-script-execution-start-time data-x-internal=record-module-script-execution-start-time>Record module script execution start time</a> given <var>script</var>.<li><p><a href=#prepare-to-run-script id=calling-scripts:prepare-to-run-script-2>Prepare to run script</a> given <var>settings</var>.<li><p>Let <var>evaluationPromise</var> be null.<li><p>If <var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow-3>error to
   rethrow</a> is not null, then set <var>evaluationPromise</var> to <a id=calling-scripts:a-promise-rejected-with href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected
   with</a> <var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow-4>error to
   rethrow</a>.<li>
    <p>Otherwise:</p>

    <ol><li><p>Let <var>record</var> be <var>script</var>'s <a href=#concept-script-record id=calling-scripts:concept-script-record-2>record</a>.</p>

     <li>
      <p>Set <var>evaluationPromise</var> to <var>record</var>.<a href=https://tc39.es/ecma262/#sec-moduleevaluation id=calling-scripts:js-evaluate data-x-internal=js-evaluate>Evaluate</a>().</p>

      <p class=note>This step will recursively evaluate all of the module's dependencies.</p>

      <p>If <a href=https://tc39.es/ecma262/#sec-moduleevaluation id=calling-scripts:js-evaluate-2 data-x-internal=js-evaluate>Evaluate</a> fails to complete as a result of the user agent
      <a href=#abort-a-running-script id=calling-scripts:abort-a-running-script-3>aborting the running script</a>, then set
      <var>evaluationPromise</var> to <a id=calling-scripts:a-promise-rejected-with-2 href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> a new
      <a id=calling-scripts:quotaexceedederror-2 href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a> <code id=calling-scripts:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
      </ol>
   <li><p>If <var>preventErrorReporting</var> is false, then <a id=calling-scripts:upon-rejection href=https://webidl.spec.whatwg.org/#upon-rejection data-x-internal=upon-rejection>upon rejection</a> of
   <var>evaluationPromise</var> with <var>reason</var>, <a href=#report-an-exception id=calling-scripts:report-an-exception-2>report an exception</a> given by
   <var>reason</var> for <var>script</var>'s <a href=#settings-object id=calling-scripts:settings-object-4>settings
   object</a>'s <a href=#concept-settings-object-global id=calling-scripts:concept-settings-object-global-2>global object</a>.<li><p><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-5>Clean up after running script</a> with <var>settings</var>.<li><p>Return <var>evaluationPromise</var>.</ol>

  <p>The steps to <dfn id=check-if-we-can-run-script>check if we can run script</dfn> with an <a href=#environment-settings-object id=calling-scripts:environment-settings-object>environment settings
  object</a> <var>settings</var> are as follows. They return either "run" or "do not run".</p>

  <ol><li><p>If the <a href=#concept-settings-object-global id=calling-scripts:concept-settings-object-global-3>global object</a> specified by
   <var>settings</var> is a <code id=calling-scripts:window><a href=nav-history-apis.html#window>Window</a></code> object whose <code id=calling-scripts:document><a href=dom.html#document>Document</a></code> object is not
   <a id=calling-scripts:fully-active href=document-sequences.html#fully-active>fully active</a>, then return "do not run".</p>

   <li><p>If <a href=#concept-environment-noscript id=calling-scripts:concept-environment-noscript>scripting is disabled</a> for
   <var>settings</var>, then return "do not run".</p>

   <li><p>Return "run".</ol>

  <p>The steps to <dfn id=prepare-to-run-script data-export="">prepare to run script</dfn> with an <a href=#environment-settings-object id=calling-scripts:environment-settings-object-2>environment settings
  object</a> <var>settings</var> are as follows:</p>

  <ol><li><p>Push <var>settings</var>'s <a href=#realm-execution-context id=calling-scripts:realm-execution-context>realm execution context</a> onto the <a id=calling-scripts:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript
   execution context stack</a>; it is now the <a id=calling-scripts:running-javascript-execution-context href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution
   context</a>.<li><p>Add <var>settings</var> to the <a id=calling-scripts:surrounding-agent href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding agent</a>'s <a href=#concept-agent-event-loop id=calling-scripts:concept-agent-event-loop>event loop</a>'s <a href=#currently-running-task id=calling-scripts:currently-running-task>currently running task</a>'s
   <a href=#script-evaluation-environment-settings-object-set id=calling-scripts:script-evaluation-environment-settings-object-set>script evaluation environment settings object set</a>.</ol>

  <p>The steps to <dfn id=clean-up-after-running-script data-export="">clean up after running script</dfn> with an <a href=#environment-settings-object id=calling-scripts:environment-settings-object-3>environment settings
  object</a> <var>settings</var> are as follows:</p>

  <ol><li><p><a id=calling-scripts:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>settings</var>'s <a href=#realm-execution-context id=calling-scripts:realm-execution-context-2>realm execution context</a> is the
   <a id=calling-scripts:running-javascript-execution-context-2 href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution context</a>.<li><p>Remove <var>settings</var>'s <a href=#realm-execution-context id=calling-scripts:realm-execution-context-3>realm execution context</a> from the
   <a id=calling-scripts:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li><p>If the <a id=calling-scripts:javascript-execution-context-stack-3 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> is now empty, <a href=#perform-a-microtask-checkpoint id=calling-scripts:perform-a-microtask-checkpoint>perform a
   microtask checkpoint</a>. (If this runs scripts, these algorithms will be invoked
   reentrantly.)</ol>

  <p class=note>These algorithms are not invoked by one script directly calling another, but they
  can be invoked reentrantly in an indirect manner, e.g. if a script dispatches an event which has
  event listeners registered.</p>

  <p>The <dfn id=running-script>running script</dfn> is the <a href=#concept-script id=calling-scripts:concept-script>script</a> in the
  [[HostDefined]] field in the ScriptOrModule component of the <a id=calling-scripts:running-javascript-execution-context-3 href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution
  context</a>.</p>


  <h5 id=killing-scripts><span class=secno>8.1.4.5</span> Killing scripts<a href=#killing-scripts class=self-link></a></h5>

  <p>Although the JavaScript specification does not account for this possibility, it's sometimes
  necessary to <dfn id=abort-a-running-script data-lt="abort a running script|abort the running script" data-export="">abort a
  running script</dfn>. This causes any <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=killing-scripts:js-scriptevaluation data-x-internal=js-scriptevaluation>ScriptEvaluation</a>
  or <a id=killing-scripts:source-text-module-record href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module Record</a> <a href=https://tc39.es/ecma262/#sec-moduleevaluation id=killing-scripts:js-evaluate data-x-internal=js-evaluate>Evaluate</a> invocations
  to cease immediately, emptying the <a id=killing-scripts:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> without
  triggering any of the normal mechanisms like <code>finally</code> blocks.
  <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <p>User agents may impose resource limitations on scripts, for example CPU quotas, memory limits,
  total execution time limits, or bandwidth limitations. When a script exceeds a limit, the user
  agent may either throw a <a id=killing-scripts:quotaexceedederror href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a> <code id=killing-scripts:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>,
  <a href=#abort-a-running-script id=killing-scripts:abort-a-running-script>abort the script</a> without an exception, prompt the
  user, or throttle script execution.</p>

  <div class=example>

   <p>For example, the following script never terminates. A user agent could, after waiting for a
   few seconds, prompt the user to either terminate the script or let it continue.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- k>while</c-> <c- p>(</c-><c- kc>true</c-><c- p>)</c-> <c- p>{</c-> <c- d>/* loop */</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>User agents are encouraged to allow users to disable scripting whenever the user is prompted
  either by a script (e.g. using the <code id=killing-scripts:dom-alert><a href=timers-and-user-prompts.html#dom-alert>window.alert()</a></code> API) or because
  of a script's actions (e.g. because it has exceeded a time limit).</p>

  <p>If scripting is disabled while a script is executing, the script should be terminated
  immediately.</p>

  <p>User agents may allow users to specifically disable scripts just for the purposes of closing a
  <a id=killing-scripts:browsing-context href=document-sequences.html#browsing-context>browsing context</a>.</p>

  <p class=example>For example, the prompt mentioned in the example above could also offer the
  user with a mechanism to just close the page entirely, without running any <code id=killing-scripts:event-unload><a href=indices.html#event-unload>unload</a></code> event handlers.</p>

  

  <h5 id=runtime-script-errors><span class=secno>8.1.4.6</span> Runtime script errors<a href=#runtime-script-errors class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/reportError title="The reportError() global method may be used to report errors to the console or global event handlers, emulating an uncaught JavaScript exception.">reportError</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>93+</span></span><span class="safari yes"><span>Safari</span><span>15.4+</span></span><span class="chrome yes"><span>Chrome</span><span>95+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>95+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=domintro><dt><code>self.<a href=#dom-reporterror id=dom-reporterror-dev>reportError</a>(<var>e</var>)</code><dd><p>Dispatches an <code id=runtime-script-errors:event-error><a href=indices.html#event-error>error</a></code> event at the global object for the
   given value <var>e</var>, in the same fashion as an unhandled exception.</dl>

  

  

  <p>To <dfn id=extract-error>extract error information</dfn> from a JavaScript value
  <var>exception</var>:</p>

  <ol><li><p>Let <var>attributes</var> be an empty <a href=https://infra.spec.whatwg.org/#ordered-map id=runtime-script-errors:ordered-map data-x-internal=ordered-map>map</a> keyed by IDL
   attributes.<li><p>Set <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-error><a href=#dom-errorevent-error>error</a></code>] to
   <var>exception</var>.<li>
    <p>
     <a id=runtime-script-errors:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
     Set <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-message><a href=#dom-errorevent-message>message</a></code>],
     <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-filename><a href=#dom-errorevent-filename>filename</a></code>],
     <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-lineno><a href=#dom-errorevent-lineno>lineno</a></code>], and
     <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-colno><a href=#dom-errorevent-colno>colno</a></code>] to
     <a id=runtime-script-errors:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> values derived from <var>exception</var>.
    </p>

    <p class=note>Browsers implement behavior not specified here or in the JavaScript
    specification to gather values which are helpful, including in unusual cases (e.g., <code>eval</code>). In the future, this might be specified in greater detail.</p>
   <li><p>Return <var>attributes</var>.</ol>

  <p id=runtime-script-errors-in-documents><span id=report-the-error></span>To <dfn id=report-an-exception data-export="">report an exception</dfn> <var>exception</var> which is a JavaScript value, for a
  particular <a href=#global-object id=runtime-script-errors:global-object>global object</a> <var>global</var> and optional boolean <dfn id=report-exception-omiterror><var>omitError</var></dfn> (default false):</p>

  <ol><li><p>Let <var>notHandled</var> be true.<li><p>Let <var>errorInfo</var> be the result of <a href=#extract-error id=runtime-script-errors:extract-error>extracting error
   information</a> from <var>exception</var>.<li>
    <p>Let <var>script</var> be a <a href=#concept-script id=runtime-script-errors:concept-script>script</a> found in an
    <a id=runtime-script-errors:implementation-defined-2 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> way, or null. This should usually be the <a href=#running-script id=runtime-script-errors:running-script>running
    script</a> (most notably during <a href=#run-a-classic-script id=runtime-script-errors:run-a-classic-script>run a classic script</a>).</p>

    <p class=note>Implementations have not yet settled on interoperable behavior for which script
    is used to determine whether errors are muted in less common cases.</p>
   <li><p>If <var>script</var> is a <a href=#classic-script id=runtime-script-errors:classic-script>classic script</a> and <var>script</var>'s <a href=#muted-errors id=runtime-script-errors:muted-errors>muted
   errors</a> is true, then set <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-error-2><a href=#dom-errorevent-error>error</a></code>] to null, <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-message-2><a href=#dom-errorevent-message>message</a></code>] to "<code>Script error.</code>",
   <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-filename-2><a href=#dom-errorevent-filename>filename</a></code>] to the empty
   string, <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-lineno-2><a href=#dom-errorevent-lineno>lineno</a></code>] to 0, and
   <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-colno-2><a href=#dom-errorevent-colno>colno</a></code>] to 0.<li><p>If <var>omitError</var> is true, then set <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-error-3><a href=#dom-errorevent-error>error</a></code>] to null.<li>
    <p>If <var>global</var> is not <a href=#in-error-reporting-mode id=runtime-script-errors:in-error-reporting-mode>in error reporting mode</a>, then:</p>

    <ol><li>Set <var>global</var>'s <a href=#in-error-reporting-mode id=runtime-script-errors:in-error-reporting-mode-2>in error reporting mode</a> to true.<li>
      <p>If <var>global</var> implements <code id=runtime-script-errors:eventtarget><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code>, then set <var>notHandled</var> to
      the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=runtime-script-errors:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=runtime-script-errors:event-error-2><a href=indices.html#event-error>error</a></code> at <var>global</var>, using <code id=runtime-script-errors:errorevent><a href=#errorevent>ErrorEvent</a></code>, with
      the <code id=runtime-script-errors:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true,
      and additional attributes initialized according to <var>errorInfo</var>.</p>

      <p class=note>Returning true in an event handler cancels the event per <a href=#the-event-handler-processing-algorithm id=runtime-script-errors:the-event-handler-processing-algorithm>the event
      handler processing algorithm</a>.</p>
     <li><p>Set <var>global</var>'s <a href=#in-error-reporting-mode id=runtime-script-errors:in-error-reporting-mode-3>in error reporting mode</a> to false.</ol>
   <li>
    <p>If <var>notHandled</var> is true, then:</p>

    <ol><li><p>Set <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-error-4><a href=#dom-errorevent-error>error</a></code>] to
     null.<li>
      <p>If <var>global</var> implements <code id=runtime-script-errors:dedicatedworkerglobalscope><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>, <a href=#queue-a-global-task id=runtime-script-errors:queue-a-global-task>queue a
      global task</a> on the <a href=#dom-manipulation-task-source id=runtime-script-errors:dom-manipulation-task-source>DOM manipulation task source</a> with the
      <var>global</var>'s associated <code id=runtime-script-errors:worker><a href=workers.html#worker>Worker</a></code>'s <a href=#concept-relevant-global id=runtime-script-errors:concept-relevant-global>relevant global object</a> to
      run these steps:</p>

      <ol><li><p>Let <var>workerObject</var> be the <code id=runtime-script-errors:worker-2><a href=workers.html#worker>Worker</a></code> object associated with
       <var>global</var>.<li><p>Set <var>notHandled</var> to the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=runtime-script-errors:concept-event-fire-2 data-x-internal=concept-event-fire>firing
       an event</a> named <code id=runtime-script-errors:event-error-3><a href=indices.html#event-error>error</a></code> at <var>workerObject</var>,
       using <code id=runtime-script-errors:errorevent-2><a href=#errorevent>ErrorEvent</a></code>, with the <code id=runtime-script-errors:dom-event-cancelable-2><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true,
       and additional attributes initialized according to <var>errorInfo</var>.<li>
        <p>If <var>notHandled</var> is true, then <a href=#report-an-exception id=runtime-script-errors:report-an-exception>report</a>
        <var>exception</var> for <var>workerObject</var>'s <a href=#concept-relevant-global id=runtime-script-errors:concept-relevant-global-2>relevant global object</a> with
        <a href=#report-exception-omiterror id=runtime-script-errors:report-exception-omiterror><var>omitError</var></a> set to true.</p>

        <p class=note>The actual <var>exception</var> value will not be available in the owner
        realm, but the user agent still carries through enough information to set the message,
        filename, and other attributes, as well as potentially report to a developer console.</p>
       </ol>
     <li><p>Otherwise, the user agent may report <var>exception</var> to a developer
     console.</ol>
   </ol>

  <p>If the implicit port connecting a worker to its <code id=runtime-script-errors:worker-3><a href=workers.html#worker>Worker</a></code> object has been
  disentangled (i.e. if the parent worker has been terminated), then the user agent must act as if
  the <code id=runtime-script-errors:worker-4><a href=workers.html#worker>Worker</a></code> object had no <code id=runtime-script-errors:event-error-4><a href=indices.html#event-error>error</a></code> event handler and as
  if that worker's <code id=runtime-script-errors:handler-workerglobalscope-onerror><a href=workers.html#handler-workerglobalscope-onerror>onerror</a></code> attribute was
  null, but must otherwise act as described above.</p>

  <p class=note>Thus, error reports propagate up to the chain of dedicated workers up to the
  original <code id=runtime-script-errors:document><a href=dom.html#document>Document</a></code>, even if some of the workers along this chain have been terminated
  and garbage collected.</p>

  <p>Previous revisions of this standard defined an algorithm to <dfn id=report-the-exception data-lt="report the exception" data-export="">report the exception</dfn>. As part of <a href=https://github.com/whatwg/html>issue #958</a>, this has been superseded by <a href=#report-an-exception id=runtime-script-errors:report-an-exception-2>report an
  exception</a> which behaves differently and takes different inputs. <a href=https://github.com/whatwg/html/issues/10516>Issue #10516</a> tracks updating the
  specification ecosystem.</p>

  <hr>

  <p>The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-reporterror data-dfn-type=method><code>reportError(<var>e</var>)</code></dfn> method steps are to
  <a href=#report-an-exception id=runtime-script-errors:report-an-exception-3>report an exception</a> <var>e</var> for <a id=runtime-script-errors:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</p>

  <p class=XXX>It is unclear whether <a href=#muted-errors id=runtime-script-errors:muted-errors-2>muting</a> is
  applicable here. In Chrome and Safari it is muted, but in Firefox it is not. See also <a href=https://github.com/whatwg/html/issues/958>issue #958</a>.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent title="The ErrorEvent interface represents events providing information related to errors in scripts or in files.">ErrorEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><p id=the-errorevent-interface>The <code id=runtime-script-errors:errorevent-3><a href=#errorevent>ErrorEvent</a></code> interface is defined as follows:</p>

  <pre><code class='idl'>[Exposed=*]
<c- b>interface</c-> <dfn id='errorevent' data-dfn-type='interface'><c- g>ErrorEvent</c-></dfn> : <a id='runtime-script-errors:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> {
  <a href='https://dom.spec.whatwg.org/#concept-event-constructor' id='runtime-script-errors:dom-event-constructor' data-x-internal='dom-event-constructor'><c- g>constructor</c-></a>(<c- b>DOMString</c-> <c- g>type</c->, <c- b>optional</c-> <a href='#erroreventinit' id='runtime-script-errors:erroreventinit'><c- n>ErrorEventInit</c-></a> <c- g>eventInitDict</c-> = {});

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-errorevent-message' id='runtime-script-errors:dom-errorevent-message-3'><c- g>message</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-errorevent-filename' id='runtime-script-errors:dom-errorevent-filename-3'><c- g>filename</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-errorevent-lineno' id='runtime-script-errors:dom-errorevent-lineno-3'><c- g>lineno</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-errorevent-colno' id='runtime-script-errors:dom-errorevent-colno-3'><c- g>colno</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a href='#dom-errorevent-error' id='runtime-script-errors:dom-errorevent-error-5'><c- g>error</c-></a>;
};

<c- b>dictionary</c-> <dfn id='erroreventinit' data-dfn-type='dictionary'><c- g>ErrorEventInit</c-></dfn> : <a id='runtime-script-errors:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> {
  <c- b>DOMString</c-> <c- g>message</c-> = &quot;&quot;;
  <c- b>USVString</c-> <c- g>filename</c-> = &quot;&quot;;
  <c- b>unsigned</c-> <c- b>long</c-> <c- g>lineno</c-> = 0;
  <c- b>unsigned</c-> <c- b>long</c-> <c- g>colno</c-> = 0;
  <c- b>any</c-> <c- g>error</c->;
};</code></pre>

  <p>The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-message data-dfn-type=attribute><code>message</code></dfn>
  attribute must return the value it was initialized to. It represents the error message.</p>

  <p>The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-filename data-dfn-type=attribute><code>filename</code></dfn> attribute must return the value it was
  initialized to. It represents the <a id=runtime-script-errors:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the script in which the error originally
  occurred.</p>

  <p>The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-lineno data-dfn-type=attribute><code>lineno</code></dfn>
  attribute must return the value it was initialized to. It represents the line number where the
  error occurred in the script.</p>

  <p>The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-colno data-dfn-type=attribute><code>colno</code></dfn>
  attribute must return the value it was initialized to. It represents the column number where the
  error occurred in the script.</p>

  <p>The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-error data-dfn-type=attribute><code>error</code></dfn>
  attribute must return the value it was initialized to. It must initially be initialized to
  undefined. Where appropriate, it is set to the object representing the error (e.g., the exception
  object in the case of an uncaught exception).</p>

  

  <h5 id=unhandled-promise-rejections><span class=secno>8.1.4.7</span> Unhandled promise rejections<a href=#unhandled-promise-rejections class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/rejectionhandled_event title="The rejectionhandled event is sent to the script's global scope (usually window but also Worker) whenever a rejected JavaScript Promise is handled late, i.e. when a handler is attached to the promise after its rejection had caused an unhandledrejection event.">Window/rejectionhandled_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>69+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>In addition to synchronous <a href=#runtime-script-errors>runtime script errors</a>, scripts
  may experience asynchronous promise rejections, tracked via the <code id=unhandled-promise-rejections:event-unhandledrejection><a href=indices.html#event-unhandledrejection>unhandledrejection</a></code> and <code id=unhandled-promise-rejections:event-rejectionhandled><a href=indices.html#event-rejectionhandled>rejectionhandled</a></code> events. Tracking these
  rejections is done via the <a href=#the-hostpromiserejectiontracker-implementation id=unhandled-promise-rejections:the-hostpromiserejectiontracker-implementation>HostPromiseRejectionTracker</a> abstract operation, but
  reporting them is defined here.</p>

  

  <p>To <dfn id=notify-about-rejected-promises>notify about rejected promises</dfn> given a <a href=#global-object id=unhandled-promise-rejections:global-object>global object</a>
  <var>global</var>:</p>

  <ol><li><p>Let <var>list</var> be a <a href=https://infra.spec.whatwg.org/#list-clone id=unhandled-promise-rejections:list-clone data-x-internal=list-clone>clone</a> of <var>global</var>'s
   <a href=#about-to-be-notified-rejected-promises-list id=unhandled-promise-rejections:about-to-be-notified-rejected-promises-list>about-to-be-notified rejected promises list</a>.<li><p>If <var>list</var> <a href=https://infra.spec.whatwg.org/#list-is-empty id=unhandled-promise-rejections:list-is-empty data-x-internal=list-is-empty>is empty</a>, then return.<li><p><a href=https://infra.spec.whatwg.org/#list-empty id=unhandled-promise-rejections:list-empty data-x-internal=list-empty>Empty</a> <var>global</var>'s <a href=#about-to-be-notified-rejected-promises-list id=unhandled-promise-rejections:about-to-be-notified-rejected-promises-list-2>about-to-be-notified
   rejected promises list</a>.<li>
    <p><a href=#queue-a-global-task id=unhandled-promise-rejections:queue-a-global-task>Queue a global task</a> on the <a href=#dom-manipulation-task-source id=unhandled-promise-rejections:dom-manipulation-task-source>DOM manipulation task source</a> given
    <var>global</var> to run the following step:</p>

    <ol><li><p><a href=https://infra.spec.whatwg.org/#list-iterate id=unhandled-promise-rejections:list-iterate data-x-internal=list-iterate>For each</a> promise <var>p</var> of <var>list</var>:</p>

      <ol><li><p>If <var>p</var>.[[PromiseIsHandled]] is true, then <a id=unhandled-promise-rejections:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>Let <var>notCanceled</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=unhandled-promise-rejections:concept-event-fire data-x-internal=concept-event-fire>firing
       an event</a> named <code id=unhandled-promise-rejections:event-unhandledrejection-2><a href=indices.html#event-unhandledrejection>unhandledrejection</a></code> at
       <var>global</var>, using <code id=unhandled-promise-rejections:promiserejectionevent><a href=#promiserejectionevent>PromiseRejectionEvent</a></code>, with the <code id=unhandled-promise-rejections:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true, the <code id=unhandled-promise-rejections:dom-promiserejectionevent-promise><a href=#dom-promiserejectionevent-promise>promise</a></code> attribute initialized to
       <var>p</var>, and the <code id=unhandled-promise-rejections:dom-promiserejectionevent-reason><a href=#dom-promiserejectionevent-reason>reason</a></code>
       attribute initialized to <var>p</var>.[[PromiseResult]].<li id=concept-promise-rejection-handled><p id=concept-promise-rejection-nothandled>If
       <var>notCanceled</var> is true, then the user agent may report
       <var>p</var>.[[PromiseResult]] to a developer console.<li><p>If <var>p</var>.[[PromiseIsHandled]] is false, then <a href=https://infra.spec.whatwg.org/#set-append id=unhandled-promise-rejections:set-append data-x-internal=set-append>append</a> <var>p</var> to <var>global</var>'s <a href=#outstanding-rejected-promises-weak-set id=unhandled-promise-rejections:outstanding-rejected-promises-weak-set>outstanding rejected
       promises weak set</a>.</ol>
     </ol>
   </ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent title="The PromiseRejectionEvent interface represents events which are sent to the global script context when JavaScript Promises are rejected. These events are particularly useful for telemetry and debugging purposes.">PromiseRejectionEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>69+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p id=the-promiserejectionevent-interface>The <code id=unhandled-promise-rejections:promiserejectionevent-2><a href=#promiserejectionevent>PromiseRejectionEvent</a></code> interface is
  defined as follows:</p>

  <pre><code class='idl'>[Exposed=*]
<c- b>interface</c-> <dfn id='promiserejectionevent' data-dfn-type='interface'><c- g>PromiseRejectionEvent</c-></dfn> : <a id='unhandled-promise-rejections:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> {
  <a href='https://dom.spec.whatwg.org/#concept-event-constructor' id='unhandled-promise-rejections:dom-event-constructor' data-x-internal='dom-event-constructor'><c- g>constructor</c-></a>(<c- b>DOMString</c-> <c- g>type</c->, <a href='#promiserejectioneventinit' id='unhandled-promise-rejections:promiserejectioneventinit'><c- n>PromiseRejectionEventInit</c-></a> <c- g>eventInitDict</c->);

  <c- b>readonly</c-> <c- b>attribute</c-> <a href='https://webidl.spec.whatwg.org/#idl-object' id='unhandled-promise-rejections:idl-object' data-x-internal='idl-object'><c- b>object</c-></a> <a href='#dom-promiserejectionevent-promise' id='unhandled-promise-rejections:dom-promiserejectionevent-promise-2'><c- g>promise</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a href='#dom-promiserejectionevent-reason' id='unhandled-promise-rejections:dom-promiserejectionevent-reason-2'><c- g>reason</c-></a>;
};

<c- b>dictionary</c-> <dfn id='promiserejectioneventinit' data-dfn-type='dictionary'><c- g>PromiseRejectionEventInit</c-></dfn> : <a id='unhandled-promise-rejections:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> {
  <c- b>required</c-> <a href='https://webidl.spec.whatwg.org/#idl-object' id='unhandled-promise-rejections:idl-object-2' data-x-internal='idl-object'><c- b>object</c-></a> <c- g>promise</c->;
  <c- b>any</c-> <c- g>reason</c->;
};</code></pre>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent/promise title="The PromiseRejectionEvent interface's promise read-only property indicates the JavaScript Promise which was rejected. You can examine the event's PromiseRejectionEvent.reason property to learn why the promise was rejected.">PromiseRejectionEvent/promise</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>69+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=PromiseRejectionEvent id=dom-promiserejectionevent-promise data-dfn-type=attribute><code>promise</code></dfn> attribute must return the value it
  was initialized to. It represents the promise which this notification is about.</p>

  <p class=note>Because of how Web IDL conversion rules for <code><a href=https://webidl.spec.whatwg.org/#idl-promise id=unhandled-promise-rejections:idl-promise data-x-internal=idl-promise>Promise</a>&lt;<var>T</var>></code> types always wrap the input into a new promise, the
  <code id=unhandled-promise-rejections:dom-promiserejectionevent-promise-3><a href=#dom-promiserejectionevent-promise>promise</a></code> attribute is of type <code id=unhandled-promise-rejections:idl-object-3><a data-x-internal=idl-object href=https://webidl.spec.whatwg.org/#idl-object>object</a></code> instead, which is more appropriate for representing an opaque
  handle to the original promise object.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent/reason title="The PromiseRejectionEvent reason read-only property is any JavaScript value or Object which provides the reason passed into Promise.reject(). This in theory provides information about why the promise was rejected.">PromiseRejectionEvent/reason</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>69+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=PromiseRejectionEvent id=dom-promiserejectionevent-reason data-dfn-type=attribute><code>reason</code></dfn> attribute must return the value it
  was initialized to. It represents the rejection reason for the promise.</p>


  <h5 id=import-map-parse-results><span class=secno>8.1.4.8</span> Import map parse results<a href=#import-map-parse-results class=self-link></a></h5>

  <p>An <dfn id=import-map-parse-result>import map parse result</dfn> is a <a id=import-map-parse-results:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> that is similar to a <a href=#concept-script id=import-map-parse-results:concept-script>script</a>, and also can be stored in a <code id=import-map-parse-results:the-script-element><a href=scripting.html#the-script-element>script</a></code> element's
  <a href=scripting.html#concept-script-result id=import-map-parse-results:concept-script-result>result</a>, but is not counted as a <a href=#concept-script id=import-map-parse-results:concept-script-2>script</a> for other purposes. It has the following <a href=https://infra.spec.whatwg.org/#struct-item id=import-map-parse-results:struct-item data-x-internal=struct-item>items</a>:</p>

  <dl><dt>An <dfn id=impr-import-map>import map</dfn><dd>An <a href=#import-map id=import-map-parse-results:import-map>import map</a> or null.<dt>An <dfn id=impr-error-to-rethrow>error to rethrow</dfn><dd>A JavaScript value representing an error that will prevent using this import map, when
   non-null.</dl>

  <p>To <dfn id=create-an-import-map-parse-result>create an import map parse result</dfn> given a <a id=import-map-parse-results:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>input</var>
  and a <a id=import-map-parse-results:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>:</p>

  <ol><li><p>Let <var>result</var> be an <a href=#import-map-parse-result id=import-map-parse-results:import-map-parse-result>import map parse result</a> whose <a href=#impr-import-map id=import-map-parse-results:impr-import-map>import map</a> is null and whose <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow>error to rethrow</a> is null.<li><p><a href=#parse-an-import-map-string id=import-map-parse-results:parse-an-import-map-string>Parse an import map string</a> given <var>input</var> and <var>baseURL</var>,
   catching any exceptions. If this threw an exception, then set <var>result</var>'s <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow-2>error to rethrow</a> to that exception. Otherwise, set
   <var>result</var>'s <a href=#impr-import-map id=import-map-parse-results:impr-import-map-2>import map</a> to the return
   value.<li><p>Return <var>result</var>.</ol>

  <p>To <dfn id=register-an-import-map>register an import map</dfn> given a <code id=import-map-parse-results:window><a href=nav-history-apis.html#window>Window</a></code> <var>global</var> and an
  <a href=#import-map-parse-result id=import-map-parse-results:import-map-parse-result-2>import map parse result</a> <var>result</var>:</p>

  <ol><li><p>If <var>result</var>'s <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow-3>error to rethrow</a> is
   not null, then <a href=#report-an-exception id=import-map-parse-results:report-an-exception>report an exception</a> given by <var>result</var>'s <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow-4>error to rethrow</a> for <var>global</var> and
   return.<li><p><a href=#merge-existing-and-new-import-maps id=import-map-parse-results:merge-existing-and-new-import-maps>Merge existing and new import
   maps</a>, given <var>global</var> and <var>result</var>'s <a href=#impr-import-map id=import-map-parse-results:impr-import-map-3>import map</a>.</ol>


  <h5 id=speculation-rules-parse-results><span class=secno>8.1.4.9</span> Speculation rules parse results<a href=#speculation-rules-parse-results class=self-link></a></h5>

  <p>A <dfn id=speculation-rules-parse-result>speculation rules parse result</dfn> is a <a id=speculation-rules-parse-results:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> that is similar to a <a href=#concept-script id=speculation-rules-parse-results:concept-script>script</a>, and also can be stored in a <code id=speculation-rules-parse-results:the-script-element><a href=scripting.html#the-script-element>script</a></code> element's
  <a href=scripting.html#concept-script-result id=speculation-rules-parse-results:concept-script-result>result</a>, but is not counted as a <a href=#concept-script id=speculation-rules-parse-results:concept-script-2>script</a> for other purposes. It has the following <a href=https://infra.spec.whatwg.org/#struct-item id=speculation-rules-parse-results:struct-item data-x-internal=struct-item>items</a>:</p>

  <dl><dt>A <dfn id=srpr-sr-set>speculation rule set</dfn><dd>A <a id=speculation-rules-parse-results:speculation-rule-set href=speculative-loading.html#speculation-rule-set>speculation rule set</a> or null.<dt>An <dfn id=srpr-error-to-rethrow>error to rethrow</dfn><dd>A JavaScript value representing an error that will prevent using these speculation rules,
   when non-null.</dl>

  <p>To <dfn id=create-a-speculation-rules-parse-result>create a speculation rules parse result</dfn> given a <a id=speculation-rules-parse-results:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>
  <var>input</var> and a <code id=speculation-rules-parse-results:document><a href=dom.html#document>Document</a></code> <var>document</var>:</p>

  <ol><li><p>Let <var>result</var> be a <a href=#speculation-rules-parse-result id=speculation-rules-parse-results:speculation-rules-parse-result>speculation rules parse result</a> whose <a href=#srpr-sr-set id=speculation-rules-parse-results:srpr-sr-set>import map</a> is null and whose <a href=#srpr-error-to-rethrow id=speculation-rules-parse-results:srpr-error-to-rethrow>error to rethrow</a> is null.<li><p><a id=speculation-rules-parse-results:parse-a-speculation-rule-set-string href=speculative-loading.html#parse-a-speculation-rule-set-string>Parse a speculation rule set string</a> given <var>input</var>,
   <var>document</var>, and <var>document</var>'s <a id=speculation-rules-parse-results:document-base-url href=urls-and-fetching.html#document-base-url>document base URL</a>, catching any
   exceptions. If this threw an exception, then set <var>result</var>'s <a href=#srpr-error-to-rethrow id=speculation-rules-parse-results:srpr-error-to-rethrow-2>error to rethrow</a> to that exception. Otherwise, set
   <var>result</var>'s <a href=#srpr-sr-set id=speculation-rules-parse-results:srpr-sr-set-2>speculation rule set</a> to the return
   value.<li><p>Return <var>result</var>.</ol>

  <p>To <dfn id=register-speculation-rules>register speculation rules</dfn> given a <code id=speculation-rules-parse-results:window><a href=nav-history-apis.html#window>Window</a></code> <var>global</var>, a
  <a href=#speculation-rules-parse-result id=speculation-rules-parse-results:speculation-rules-parse-result-2>speculation rules parse result</a> <var>result</var>, and an optional boolean
  <var>queueErrors</var> (default false):</p>

  <ol><li>
    <p>If <var>result</var>'s <a href=#srpr-error-to-rethrow id=speculation-rules-parse-results:srpr-error-to-rethrow-3>error to rethrow</a> is not
    null, then:</p>

    <ol><li>
      <p>If <var>queueErrors</var> is true, then <a href=#queue-a-global-task id=speculation-rules-parse-results:queue-a-global-task>queue a global task</a> on the <a href=#dom-manipulation-task-source id=speculation-rules-parse-results:dom-manipulation-task-source>DOM
      manipulation task source</a> given <var>global</var> to perform the following step:</p>

      <ol><li><p><a href=#report-an-exception id=speculation-rules-parse-results:report-an-exception>Report an exception</a> given by <var>result</var>'s <a href=#srpr-error-to-rethrow id=speculation-rules-parse-results:srpr-error-to-rethrow-4>error to rethrow</a> for <var>global</var>.</ol>
     <li><p>Otherwise, <a href=#report-an-exception id=speculation-rules-parse-results:report-an-exception-2>report an exception</a> given by <var>result</var>'s <a href=#srpr-error-to-rethrow id=speculation-rules-parse-results:srpr-error-to-rethrow-5>error to rethrow</a> for <var>global</var>.<li><p>Return.</ol>
   <li><p><a href=https://infra.spec.whatwg.org/#list-append id=speculation-rules-parse-results:list-append data-x-internal=list-append>Append</a> <var>result</var>'s <a href=#srpr-sr-set id=speculation-rules-parse-results:srpr-sr-set-3>speculation rule set</a> to <var>global</var>'s <a href=nav-history-apis.html#concept-document-window id=speculation-rules-parse-results:concept-document-window>associated <code>Document</code></a>'s <a href=speculative-loading.html#document-sr-sets id=speculation-rules-parse-results:document-sr-sets>speculation rule sets</a>.<li><p><a id=speculation-rules-parse-results:consider-speculative-loads href=speculative-loading.html#consider-speculative-loads>Consider speculative loads</a> for <var>document</var>.</ol>

  <p>To <dfn id=unregister-speculation-rules>unregister speculation rules</dfn> given a <code id=speculation-rules-parse-results:window-2><a href=nav-history-apis.html#window>Window</a></code> <var>global</var> and a
  <a href=#speculation-rules-parse-result id=speculation-rules-parse-results:speculation-rules-parse-result-3>speculation rules parse result</a> <var>result</var>:</p>

  <ol><li><p>If <var>result</var>'s <a href=#srpr-error-to-rethrow id=speculation-rules-parse-results:srpr-error-to-rethrow-6>error to rethrow</a> is not
   null, then return.<li><p><a href=https://infra.spec.whatwg.org/#list-remove id=speculation-rules-parse-results:list-remove data-x-internal=list-remove>Remove</a> <var>result</var>'s <a href=#srpr-sr-set id=speculation-rules-parse-results:srpr-sr-set-4>speculation rule set</a> from <var>global</var>'s <a href=nav-history-apis.html#concept-document-window id=speculation-rules-parse-results:concept-document-window-2>associated <code>Document</code></a>'s <a href=speculative-loading.html#document-sr-sets id=speculation-rules-parse-results:document-sr-sets-2>speculation rule sets</a>.<li><p><a id=speculation-rules-parse-results:consider-speculative-loads-2 href=speculative-loading.html#consider-speculative-loads>Consider speculative loads</a> for <var>document</var>.</ol>

  <p>To <dfn id=update-speculation-rules>update speculation rules</dfn> given a <code id=speculation-rules-parse-results:window-3><a href=nav-history-apis.html#window>Window</a></code> <var>global</var>, a
  <a href=#speculation-rules-parse-result id=speculation-rules-parse-results:speculation-rules-parse-result-4>speculation rules parse result</a> <var>oldResult</var>, and a <a href=#speculation-rules-parse-result id=speculation-rules-parse-results:speculation-rules-parse-result-5>speculation rules
  parse result</a> <var>newResult</var>:</p>

  <ol><li><p><a href=https://infra.spec.whatwg.org/#list-remove id=speculation-rules-parse-results:list-remove-2 data-x-internal=list-remove>Remove</a> <var>oldResult</var>'s <a href=#srpr-sr-set id=speculation-rules-parse-results:srpr-sr-set-5>speculation rule set</a> from <var>global</var>'s <a href=nav-history-apis.html#concept-document-window id=speculation-rules-parse-results:concept-document-window-3>associated <code>Document</code></a>'s <a href=speculative-loading.html#document-sr-sets id=speculation-rules-parse-results:document-sr-sets-3>speculation rule sets</a>.<li>
    <p><a href=#register-speculation-rules id=speculation-rules-parse-results:register-speculation-rules>Register speculation rules</a> given <var>global</var>, <var>newResult</var>, and
    true.</p>

    <p id=note-update-speculation-rules-queue-errors class=note><a href=#note-update-speculation-rules-queue-errors class=self-link></a>When updating speculation rules,
    as opposed to registering them for the first time, we ensure that any <code id=speculation-rules-parse-results:event-error><a href=indices.html#event-error>error</a></code> events are queued as tasks, instead of synchronously fired.
    Although synchronously executing <code id=speculation-rules-parse-results:event-error-2><a href=indices.html#event-error>error</a></code> event handlers is OK
    when inserting <code id=speculation-rules-parse-results:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> elements, it's best if other modifications do not cause such
    synchronous script execution.</p>
   </ol>

  


  <h4 id=module-specifier-resolution><span class=secno>8.1.5</span> Module specifier resolution<a href=#module-specifier-resolution class=self-link></a></h4>

  <h5 id=the-resolution-algorithm><span class=secno>8.1.5.1</span> The resolution algorithm<a href=#the-resolution-algorithm class=self-link></a></h5>

  <p>The <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier>resolve a module specifier</a> algorithm is the primary entry point for
  converting module specifier strings into <a href=https://url.spec.whatwg.org/#concept-url id=the-resolution-algorithm:url data-x-internal=url>URLs</a>. When no <a href=#import-map id=the-resolution-algorithm:import-map>import maps</a> are involved, it is relatively straightforward, and
  reduces to <a href=#resolving-a-url-like-module-specifier id=the-resolution-algorithm:resolving-a-url-like-module-specifier>resolving a URL-like module specifier</a>.</p>

  <p>When there is a non-empty <a href=#import-map id=the-resolution-algorithm:import-map-2>import map</a> present, the behavior is more complex. It
  checks candidate entries from all applicable <a href=#module-specifier-map id=the-resolution-algorithm:module-specifier-map>module specifier
  maps</a>, from most-specific to least-specific <a href=#concept-import-map-scopes id=the-resolution-algorithm:concept-import-map-scopes>scopes</a> (falling back to the top-level unscoped <a href=#concept-import-map-imports id=the-resolution-algorithm:concept-import-map-imports>imports</a>), and from most-specific to least-specific
  prefixes. For each candidate, the <a href=#resolving-an-imports-match id=the-resolution-algorithm:resolving-an-imports-match>resolve
  an imports match</a> algorithm will give one of the following results:</p>

  <ul><li><p>Successful resolution of the specifier to a <a id=the-resolution-algorithm:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. Then the
  <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-2>resolve a module specifier</a> algorithm will return that URL.<li><p>Throwing an exception. Then the <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-3>resolve a module specifier</a> algorithm will
   rethrow that exception, without any further fallbacks.<li><p>Failing to resolve, without an error. In this case the outer <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-4>resolve a module
   specifier</a> algorithm will move on to the next candidate.</ul>

  <p>In the end, if no successful resolution is found via any of the candidate <a href=#module-specifier-map id=the-resolution-algorithm:module-specifier-map-2>module specifier maps</a>, <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-5>resolve a module specifier</a> will throw
  an exception. Thus the result is always either a <a id=the-resolution-algorithm:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> or a thrown exception.</p>

  

  <p>To <dfn id=resolve-a-module-specifier>resolve a module specifier</dfn> given a <a id=the-resolution-algorithm:the-script-element href=scripting.html#the-script-element>script</a>-or-null
  <var>referringScript</var> and a <a id=the-resolution-algorithm:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>specifier</var>:</p>

  <ol><li><p>Let <var>settingsObject</var> and <var>baseURL</var> be null.<li>
    <p>If <var>referringScript</var> is not null, then:</p>

    <ol><li><p>Set <var>settingsObject</var> to <var>referringScript</var>'s
     <a href=#settings-object id=the-resolution-algorithm:settings-object>settings object</a>.<li><p>Set <var>baseURL</var> to <var>referringScript</var>'s <a href=#concept-script-base-url id=the-resolution-algorithm:concept-script-base-url>base URL</a>.</ol>
   <li>
    <p>Otherwise:</p>

    <ol><li><p><a id=the-resolution-algorithm:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: there is a <a href=#current-settings-object id=the-resolution-algorithm:current-settings-object>current settings object</a>.<li><p>Set <var>settingsObject</var> to the <a href=#current-settings-object id=the-resolution-algorithm:current-settings-object-2>current settings object</a>.<li><p>Set <var>baseURL</var> to <var>settingsObject</var>'s <a href=#api-base-url id=the-resolution-algorithm:api-base-url>API base
     URL</a>.</ol>
   <li><p>Let <var>importMap</var> be an <a href=#empty-import-map id=the-resolution-algorithm:empty-import-map>empty import map</a>.<li><p>If <var>settingsObject</var>'s <a href=#concept-settings-object-global id=the-resolution-algorithm:concept-settings-object-global>global
   object</a> implements <code id=the-resolution-algorithm:window><a href=nav-history-apis.html#window>Window</a></code>, then set <var>importMap</var> to
   <var>settingsObject</var>'s <a href=#concept-settings-object-global id=the-resolution-algorithm:concept-settings-object-global-2>global object</a>'s
   <a href=#concept-global-import-map id=the-resolution-algorithm:concept-global-import-map>import map</a>.<li><p>Let <var>serializedBaseURL</var> be <var>baseURL</var>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer data-x-internal=concept-url-serializer>serialized</a>.<li><p>Let <var>asURL</var> be the result of <a href=#resolving-a-url-like-module-specifier id=the-resolution-algorithm:resolving-a-url-like-module-specifier-2>resolving a URL-like module specifier</a>
   given <var>specifier</var> and <var>baseURL</var>.<li><p>Let <var>normalizedSpecifier</var> be the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-2 data-x-internal=concept-url-serializer>serialization</a> of <var>asURL</var>, if <var>asURL</var> is
   non-null; otherwise, <var>specifier</var>.<li><p>Let <var>result</var> be a <a id=the-resolution-algorithm:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null, initially null.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-resolution-algorithm:list-iterate data-x-internal=list-iterate>For each</a> <var>scopePrefix</var> → <var>scopeImports</var>
    of <var>importMap</var>'s <a href=#concept-import-map-scopes id=the-resolution-algorithm:concept-import-map-scopes-2>scopes</a>:</p>

    <ol><li>
      <p>If <var>scopePrefix</var> is <var>serializedBaseURL</var>, or if <var>scopePrefix</var> ends
      with U+002F (/) and <var>scopePrefix</var> is a <a id=the-resolution-algorithm:code-unit-prefix href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of
      <var>serializedBaseURL</var>, then:</p>

      <ol><li><p>Let <var>scopeImportsMatch</var> be the result of <a href=#resolving-an-imports-match id=the-resolution-algorithm:resolving-an-imports-match-2>resolving an imports
       match</a> given <var>normalizedSpecifier</var>, <var>asURL</var>, and
       <var>scopeImports</var>.<li><p>If <var>scopeImportsMatch</var> is not null, then set <var>result</var> to
       <var>scopeImportsMatch</var>, and <a id=the-resolution-algorithm:break href=https://infra.spec.whatwg.org/#iteration-break data-x-internal=break>break</a>.</ol>
     </ol>
   <li><p>If <var>result</var> is null, set <var>result</var> to the result of <a href=#resolving-an-imports-match id=the-resolution-algorithm:resolving-an-imports-match-3>resolving an
   imports match</a> given <var>normalizedSpecifier</var>, <var>asURL</var>, and
   <var>importMap</var>'s <a href=#concept-import-map-imports id=the-resolution-algorithm:concept-import-map-imports-2>imports</a>.<li>
    <p>If <var>result</var> is null, set it to <var>asURL</var>.</p>

    <p class=note>By this point, if <var>result</var> was null, <var>specifier</var> wasn't
    remapped to anything by <var>importMap</var>, but it might have been able to be turned into a
    URL.</p>
   <li>
    <p>If <var>result</var> is not null, then:</p>

    <ol><li><p><a href=#add-module-to-resolved-module-set id=the-resolution-algorithm:add-module-to-resolved-module-set>Add module to resolved module set</a> given <var>settingsObject</var>,
     <var>serializedBaseURL</var>, <var>normalizedSpecifier</var>, and <var>asURL</var>.<li><p>Return <var>result</var>.</ol>
   <li><p>Throw a <code id=the-resolution-algorithm:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that <var>specifier</var> was a bare specifier,
   but was not remapped to anything by <var>importMap</var>.</ol>

  <p>To <dfn id=resolving-an-imports-match>resolve an imports match</dfn>, given a
  <a id=the-resolution-algorithm:string-2 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>normalizedSpecifier</var>, a <a id=the-resolution-algorithm:url-5 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null <var>asURL</var>,
  and a <a href=#module-specifier-map id=the-resolution-algorithm:module-specifier-map-3>module specifier map</a> <var>specifierMap</var>:</p>

  <ol><li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-resolution-algorithm:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>specifierKey</var> →
    <var>resolutionResult</var> of <var>specifierMap</var>:</p>

    <ol><li>
      <p>If <var>specifierKey</var> is <var>normalizedSpecifier</var>, then:</p>

      <ol><li>
        <p>If <var>resolutionResult</var> is null, then throw a <code id=the-resolution-algorithm:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating
        that resolution of <var>specifierKey</var> was blocked by a null entry.</p>

        <p class=note>This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-6>resolve a module specifier</a>
        algorithm, without any further fallbacks.</p>
       <li><p><a id=the-resolution-algorithm:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>resolutionResult</var> is a <a id=the-resolution-algorithm:url-6 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.<li><p>Return <var>resolutionResult</var>.</ol>
     <li>
      <p>If all of the following are true:</p>

      <ul><li><p><var>specifierKey</var> ends with U+002F (/);<li><p><var>specifierKey</var> is a <a id=the-resolution-algorithm:code-unit-prefix-2 href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of
       <var>normalizedSpecifier</var>; and<li><p>either <var>asURL</var> is null, or <var>asURL</var> <a id=the-resolution-algorithm:is-special href=https://url.spec.whatwg.org/#is-special data-x-internal=is-special>is special</a>,</ul>

      <p>then:</p>

      <ol><li>
        <p>If <var>resolutionResult</var> is null, then throw a <code id=the-resolution-algorithm:typeerror-3><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating
        that the resolution of <var>specifierKey</var> was blocked by a null entry.</p>

        <p class=note>This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-7>resolve a module specifier</a>
        algorithm, without any further fallbacks.</p>
       <li><p><a id=the-resolution-algorithm:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>resolutionResult</var> is a <a id=the-resolution-algorithm:url-7 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.<li><p>Let <var>afterPrefix</var> be the portion of <var>normalizedSpecifier</var> after the
       initial <var>specifierKey</var> prefix.<li><p><a id=the-resolution-algorithm:assert-4 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>resolutionResult</var>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-3 data-x-internal=concept-url-serializer>serialized</a>, ends with U+002F (/), as enforced during
       <a href=#parse-an-import-map-string id=the-resolution-algorithm:parse-an-import-map-string>parsing</a>.<li><p>Let <var>url</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-resolution-algorithm:url-parser data-x-internal=url-parser>URL parsing</a>
       <var>afterPrefix</var> with <var>resolutionResult</var>.<li>
        <p>If <var>url</var> is failure, then throw a <code id=the-resolution-algorithm:typeerror-4><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that
        resolution of <var>normalizedSpecifier</var> was blocked since the <var>afterPrefix</var>
        portion could not be URL-parsed relative to the <var>resolutionResult</var> mapped to by
        the <var>specifierKey</var> prefix.</p>

        <p class=note>This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-8>resolve a module specifier</a>
        algorithm, without any further fallbacks.</p>
       <li><p><a id=the-resolution-algorithm:assert-5 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>url</var> is a <a id=the-resolution-algorithm:url-8 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.<li>
        <p>If the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-4 data-x-internal=concept-url-serializer>serialization</a> of
        <var>resolutionResult</var> is not a <a id=the-resolution-algorithm:code-unit-prefix-3 href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-5 data-x-internal=concept-url-serializer>serialization</a> of <var>url</var>, then throw a
        <code id=the-resolution-algorithm:typeerror-5><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the resolution of <var>normalizedSpecifier</var> was
        blocked due to it backtracking above its prefix <var>specifierKey</var>.</p>

        <p class=note>This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-9>resolve a module specifier</a>
        algorithm, without any further fallbacks.</p>
       <li><p>Return <var>url</var>.</ol>
     </ol>
   <li>
    <p>Return null.</p>

    <p class=note>The <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-10>resolve a module specifier</a> algorithm will fall back to a
    less-specific scope, or to "<code>imports</code>", if possible.</p>
   </ol>

  <p>To <dfn id=resolving-a-url-like-module-specifier>resolve a URL-like module
  specifier</dfn>, given a <a id=the-resolution-algorithm:string-3 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>specifier</var> and a <a id=the-resolution-algorithm:url-9 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>
  <var>baseURL</var>:</p>

  <ol><li>
    <p>If <var>specifier</var> <a id=the-resolution-algorithm:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>/</code>", "<code>./</code>", or "<code>../</code>", then:</p>

    <ol><li><p>Let <var>url</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-resolution-algorithm:url-parser-2 data-x-internal=url-parser>URL parsing</a>
     <var>specifier</var> with <var>baseURL</var>.<li>
      <p>If <var>url</var> is failure, then return null.</p>

      <p class=example>One way this could happen is if <var>specifier</var> is "<code>../foo</code>" and <var>baseURL</var> is a <code id=the-resolution-algorithm:data-protocol><a data-x-internal=data-protocol href=https://www.rfc-editor.org/rfc/rfc2397#section-2>data:</a></code> URL.</p>
     <li><p>Return <var>url</var>.</ol>

    <p class=note>This includes cases where <var>specifier</var> <a id=the-resolution-algorithm:starts-with-2 href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>//</code>", i.e., scheme-relative URLs. Thus, <var>url</var> might end up with a
    different <a href=https://url.spec.whatwg.org/#concept-url-host id=the-resolution-algorithm:concept-url-host data-x-internal=concept-url-host>host</a> than <var>baseURL</var>.</p>
   <li><p>Let <var>url</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-resolution-algorithm:url-parser-3 data-x-internal=url-parser>URL parsing</a>
   <var>specifier</var> (with no base URL).<li><p>If <var>url</var> is failure, then return null.<li><p>Return <var>url</var>.</p>
  </ol>

  


  <h5 id=import-maps><span class=secno>8.1.5.2</span> Import maps<a href=#import-maps class=self-link></a></h5>

  <p>An <a href=#import-map id=import-map-dev>import map</a> allows control over module specifier resolution. Import maps
  are delivered via inline <code id=import-maps:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements with their <code id=import-maps:attr-script-type><a href=scripting.html#attr-script-type>type</a></code> attribute set to "<code>importmap</code>", and
  with their <a id=import-maps:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> containing a JSON representation of the import
  map.</p>

  <p>A <code id=import-maps:document><a href=dom.html#document>Document</a></code> can have multiple import maps processed, which can happen either
  before or after any modules have been imported, e.g., via <code id=import-maps:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expressions or
  <code id=import-maps:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> elements with their <code id=import-maps:attr-script-type-2><a href=scripting.html#attr-script-type>type</a></code> attribute set
  to "<code>module</code>". The <a href=#merge-existing-and-new-import-maps id=import-maps:merge-existing-and-new-import-maps>merge existing and new import maps</a> algorithm
  ensures that new import maps cannot define the module resolution for modules that were already
  defined by past import maps, or for ones that were already resolved.</p>

  <div id=example-import-map-bare-specifier class=example><a href=#example-import-map-bare-specifier class=self-link></a>
   <p>The simplest use of import maps is to globally remap a bare module specifier:</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;moment&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/moment/src/moment.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

   <p>This enables statements like <code class=js>import moment from "moment";</code>
   to work, fetching and evaluating the JavaScript module at the <code>/node_modules/moment/src/moment.js</code> URL.</p>
  </div>

  <div id=example-import-map-trailing-slashes class=example><a href=#example-import-map-trailing-slashes class=self-link></a>
   <p>An import map can remap a class of module specifiers into a class of URLs by using trailing
   slashes, like so:</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;moment/&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/moment/src/&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

   <p>This enables statements like <code class=js>import localeData from
   "moment/locale/zh-cn.js";</code> to work, fetching and evaluating the JavaScript module at the
   <code>/node_modules/moment/src/locale/zh-cn.js</code> URL. Such trailing-slash
   mappings are often combined with bare-specifier mappings, e.g.</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;moment&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/moment/src/moment.js&quot;</c-><c- p>,</c->
    <c- u>&quot;moment/&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/moment/src/&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

   <p>so that both the "main module" specified by "<code>moment</code>" and the
   "submodules" specified by paths such as "<code>moment/locale/zh-cn.js</code>" are
   available.</p>
  </div>

  <div id=example-import-map-url-like-specifier class=example><a href=#example-import-map-url-like-specifier class=self-link></a>
   <p>Bare specifiers are not the only type of module specifiers which import maps can remap.
   "URL-like" specifiers, i.e., those that are either parseable as absolute URLs or start with
   "<code>/</code>", "<code>./</code>", or "<code>../</code>", can be
   remapped as well:</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;https://cdn.example.com/vue/dist/vue.runtime.esm.js&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/vue/dist/vue.runtime.esm.js&quot;</c-><c- p>,</c->
    <c- u>&quot;/js/app.mjs&quot;</c-><c- o>:</c-> <c- u>&quot;/js/app-8e0d62a03.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;../helpers/&quot;</c-><c- o>:</c-> <c- u>&quot;https://cdn.example/helpers/&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

   <p>Note how the URL to be remapped, as well as the URL being mapped to, can be specified either
   as absolute URLs, or as relative URLs starting with "<code>/</code>", "<code>./</code>", or "<code>../</code>". (They cannot be specified as relative
   URLs without those starting sigils, as those help distinguish from bare module specifiers.) Also
   note how the <a href=#example-import-map-trailing-slashes>trailing slash mapping</a> works in
   this context as well.</p>

   <p>Such remappings operate on the post-canonicalization URL, and do not require a match between
   the literal strings supplied in the import map key and the imported module specifier. So for
   example, if this import map was included on <code>https://example.com/app.html</code>,
   then not only would <code class=js>import "/js/app.mjs"</code> be remapped, but so
   would <code class=js>import "./js/app.mjs"</code> and <code class=js>import "./foo/../js/app.mjs"</code>.</p>
  </div>

  <div id=example-import-map-scopes class=example><a href=#example-import-map-scopes class=self-link></a>
   <p>All previous examples have globally remapped module specifiers, by using the top-level "<code>imports</code>" key in the import map. The top-level "<code>scopes</code>"
   key can be used to provide localized remappings, which only apply when the referring module
   matches a specific URL prefix. For example:</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;scopes&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/a/&quot;</c-> <c- o>:</c-> <c- p>{</c->
      <c- u>&quot;moment&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/moment/src/moment.js&quot;</c->
    <c- p>},</c->
    <c- u>&quot;/b/&quot;</c-> <c- o>:</c-> <c- p>{</c->
      <c- u>&quot;moment&quot;</c-><c- o>:</c-> <c- u>&quot;https://cdn.example.com/moment/src/moment.js&quot;</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

   <p>With this import map, the statement <code>import "moment"</code> will have
   different meanings depending on which referrer script contains the statement:</p>

   <ul><li><p>Inside scripts located under <code>/a/</code>, this will import <code>/node_modules/moment/src/moment.js</code>.<li><p>Inside scripts located under <code>/b/</code>, this will import <code>https://cdn.example.com/moment/src/moment.js</code>.<li><p>Inside scripts located under <code>/c/</code>, this will fail to resolve and
    thus throw an exception.</ul>

   <p>A typical usage of scopes is to allow multiple versions of the "same" module to exist in a
   web application, with some parts of the module graph importing one version, and other parts
   importing another version.
  </div>

  <div id=example-import-map-scopes-overlapping class=example><a href=#example-import-map-scopes-overlapping class=self-link></a>
   <p>Scopes can overlap each other, and overlap the global "<code>imports</code>"
   specifier map. At resolution time, scopes are consulted in order of most- to least-specific,
   where specificity is measured by sorting the scopes using the <a id=import-maps:code-unit-less-than href=https://infra.spec.whatwg.org/#code-unit-less-than data-x-internal=code-unit-less-than>code unit less than</a>
   operation. So, for example, "<code>/scope2/scope3/</code>" is treated as more specific
   than "<code>/scope2/</code>", which is treated as more specific than the top-level
   (unscoped) mappings.</p>

   <p>The following import map illustrates this:</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;a&quot;</c-><c- o>:</c-> <c- u>&quot;/a-1.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;b&quot;</c-><c- o>:</c-> <c- u>&quot;/b-1.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;c&quot;</c-><c- o>:</c-> <c- u>&quot;/c-1.mjs&quot;</c->
  <c- p>},</c->
  <c- u>&quot;scopes&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/scope2/&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;a&quot;</c-><c- o>:</c-> <c- u>&quot;/a-2.mjs&quot;</c->
    <c- p>},</c->
    <c- u>&quot;/scope2/scope3/&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;b&quot;</c-><c- o>:</c-> <c- u>&quot;/b-3.mjs&quot;</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

   <p>This results in the following resolutions (using relative URLs for brevity):</p>

   <table id=table-import-map-scopes-example><thead><tr><td colspan=2 rowspan=2>
      <th colspan=3>Specifier
     <tr><th>"<code>a</code>"
      <th>"<code>b</code>"
      <th>"<code>c</code>"
    <tbody><tr><th rowspan=3>Referrer
      <th><code>/scope1/r.mjs</code>
      <td><code>/a-1.mjs</code>
      <td><code>/b-1.mjs</code>
      <td><code>/c-1.mjs</code>
     <tr><th><code>/scope2/r.mjs</code>
      <td><code>/a-2.mjs</code>
      <td><code>/b-1.mjs</code>
      <td><code>/c-1.mjs</code>
     <tr><th><code>/scope2/scope3/r.mjs</code>
      <td><code>/a-2.mjs</code>
      <td><code>/b-3.mjs</code>
      <td><code>/c-1.mjs</code>
   </table>
  </div>

  <div id=example-import-map-integrity class=example><a href=#example-import-map-integrity class=self-link></a>
   <p>Import maps can also be used to provide modules with integrity metadata to be used in
   <cite>Subresource Integrity</cite> checks. <a href=references.html#refsSRI>[SRI]</a>
   </p>

   <p>The following import map illustrates this:</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;a&quot;</c-><c- o>:</c-> <c- u>&quot;/a-1.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;b&quot;</c-><c- o>:</c-> <c- u>&quot;/b-1.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;c&quot;</c-><c- o>:</c-> <c- u>&quot;/c-1.mjs&quot;</c->
  <c- p>},</c->
  <c- u>&quot;integrity&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/a-1.mjs&quot;</c-><c- o>:</c-> <c- u>&quot;sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7&quot;</c-><c- p>,</c->
    <c- u>&quot;/d-1.mjs&quot;</c-><c- o>:</c-> <c- u>&quot;sha384-MBO5IDfYaE6c6Aao94oZrIOiC6CGiSN2n4QUbHNPhzk5Xhm0djZLQqTpL0HzTUxk&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
   <p>The above example provides integrity metadata to be enforced on the modules <code>/a-1.mjs</code> and <code>/d-1.mjs</code>, even if the latter is not defined
   as an import in the map.</p>
  </div>

  <hr>

  <p>The <a id=import-maps:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of a <code id=import-maps:the-script-element-3><a href=scripting.html#the-script-element>script</a></code> element representing an
  <a href=#import-map id=import-maps:import-map>import map</a> must match the following <dfn id=import-map-authoring-requirements>import map authoring
  requirements</dfn>:</p>

  <ul><li><p>It must be valid JSON. <a href=references.html#refsJSON>[JSON]</a><li><p>The JSON must represent a JSON object, with at most the three keys "<code>imports</code>", "<code>scopes</code>", and "<code>integrity</code>".<li><p>The values corresponding to the "<code>imports</code>", "<code>scopes</code>", and "<code>integrity</code>" keys, if present,
   must themselves be JSON objects.<li><p>The value corresponding to the "<code>imports</code>" key, if present, must be
   a <a href=#valid-module-specifier-map id=import-maps:valid-module-specifier-map>valid module specifier map</a>.<li><p>The value corresponding to the "<code>scopes</code>" key, if present, must be a
   JSON object, whose keys are <a href=https://url.spec.whatwg.org/#valid-url-string id=import-maps:valid-url-string data-x-internal=valid-url-string>valid URL strings</a> and whose
   values are <a href=#valid-module-specifier-map id=import-maps:valid-module-specifier-map-2>valid module specifier
   maps</a>.<li><p>The value corresponding to the "<code>integrity</code>" key, if present, must
   be a JSON object, whose keys are <a href=https://url.spec.whatwg.org/#valid-url-string id=import-maps:valid-url-string-2 data-x-internal=valid-url-string>valid URL strings</a> and
   whose values fit <a id=import-maps:the-requirements-of-the-integrity-attribute href=https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute data-x-internal=the-requirements-of-the-integrity-attribute>the requirements of the integrity attribute</a>.</ul>

  <p>A <dfn id=valid-module-specifier-map>valid module specifier map</dfn> is a JSON object that meets the following
  requirements:</p>

  <ul><li><p>All of its keys must be nonempty.<li><p>All of its values must be strings.<li><p>Each value must be either a <a href=https://url.spec.whatwg.org/#syntax-url-absolute id=import-maps:absolute-url data-x-internal=absolute-url>valid absolute URL</a> or a
   <a id=import-maps:valid-url-string-3 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>valid URL string</a> that <a id=import-maps:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>/</code>", "<code>./</code>", or "<code>../</code>".<li><p>If a given key <a id=import-maps:ends-with href=https://infra.spec.whatwg.org/#string-ends-with data-x-internal=ends-with>ends with</a> "<code>/</code>", then the corresponding
   value must also.</ul>


  

  <h5 id=import-map-processing-model><span class=secno>8.1.5.3</span> Import map processing model<a href=#import-map-processing-model class=self-link></a></h5>

  <p>Formally, an <dfn id=import-map>import map</dfn> is a <a id=import-map-processing-model:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with three <a href=https://infra.spec.whatwg.org/#struct-item id=import-map-processing-model:struct-item data-x-internal=struct-item>items</a>:</p>

  <ul><li><p><dfn id=concept-import-map-imports>imports</dfn>, a <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map>module specifier
   map</a>;<li><p><dfn id=concept-import-map-scopes>scopes</dfn>, an <a id=import-map-processing-model:ordered-map href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> of
   <a href=https://url.spec.whatwg.org/#concept-url id=import-map-processing-model:url data-x-internal=url>URLs</a> to <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map-2>module specifier
   maps</a>; and<li><p><dfn id=concept-import-map-integrity>integrity</dfn>, a <a href=#module-integrity-map id=import-map-processing-model:module-integrity-map>module integrity
   map</a>.</ul>

  <p>A <dfn id=module-specifier-map>module specifier map</dfn> is an <a id=import-map-processing-model:ordered-map-2 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> whose <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key data-x-internal=map-key>keys</a> are <a href=https://infra.spec.whatwg.org/#string id=import-map-processing-model:string data-x-internal=string>strings</a> and whose <a href=https://infra.spec.whatwg.org/#map-value id=import-map-processing-model:map-value data-x-internal=map-value>values</a> are either <a href=https://url.spec.whatwg.org/#concept-url id=import-map-processing-model:url-2 data-x-internal=url>URLs</a> or nulls.</p>

  <p>A <dfn id=module-integrity-map>module integrity map</dfn> is an <a id=import-map-processing-model:ordered-map-3 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> whose <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-2 data-x-internal=map-key>keys</a> are <a href=https://url.spec.whatwg.org/#concept-url id=import-map-processing-model:url-3 data-x-internal=url>URLs</a> and whose <a href=https://infra.spec.whatwg.org/#map-value id=import-map-processing-model:map-value-2 data-x-internal=map-value>values</a> are <a href=https://infra.spec.whatwg.org/#string id=import-map-processing-model:string-2 data-x-internal=string>strings</a> that will be used as <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=import-map-processing-model:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity metadata</a>.</p>

  <p>An <dfn id=empty-import-map>empty import map</dfn> is an <a href=#import-map id=import-map-processing-model:import-map>import map</a> with its <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports>imports</a> and <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes>scopes</a> both being empty maps.</p>

  <hr>

  <p>A <dfn id=specifier-resolution-record>specifier resolution record</dfn> is a <a id=import-map-processing-model:struct-2 href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a>. It has the following <a href=https://infra.spec.whatwg.org/#struct-item id=import-map-processing-model:struct-item-2 data-x-internal=struct-item>items</a>:</p>
  <dl><dt>A <dfn id=specifier-resolution-record-serialized-base-url>serialized base
   URL</dfn><dd>A <a id=import-map-processing-model:string-3 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>-or-null that represents the base URL of the specifier, when one
   exists.<dt>A <dfn id=specifier-resolution-record-specifier>specifier</dfn><dd>A <a id=import-map-processing-model:string-4 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> representing the specifier.<dt>A <dfn id=specifier-resolution-record-as-url>specifier as a URL</dfn><dd>A <a id=import-map-processing-model:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null that represents the URL in case of a URL-like module
   specifier.</dl>

  <p class=note>Implementations can replace
  <a href=#specifier-resolution-record-as-url id=import-map-processing-model:specifier-resolution-record-as-url>specifier as a URL</a> with a boolean that
  indicates that the specifier is either bare or URL-like that <a id=import-map-processing-model:is-special href=https://url.spec.whatwg.org/#is-special data-x-internal=is-special>is special</a>.</p>

  <p>To <dfn id=add-module-to-resolved-module-set>add module to resolved module set</dfn> given an <a href=#environment-settings-object id=import-map-processing-model:environment-settings-object>environment settings
  object</a> <var>settingsObject</var>, a <a id=import-map-processing-model:string-5 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>serializedBaseURL</var>, a
  <a id=import-map-processing-model:string-6 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>normalizedSpecifier</var>, and a <a id=import-map-processing-model:url-5 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null
  <var>asURL</var>:</p>

  <ol><li><p>Let <var>global</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-global id=import-map-processing-model:concept-settings-object-global>global object</a>.<li><p>If <var>global</var> does not implement <code id=import-map-processing-model:window><a href=nav-history-apis.html#window>Window</a></code>, then return.<li><p>Let <var>record</var> be a new <a href=#specifier-resolution-record id=import-map-processing-model:specifier-resolution-record>specifier resolution record</a>, with <a href=#specifier-resolution-record-serialized-base-url id=import-map-processing-model:specifier-resolution-record-serialized-base-url>serialized base URL</a> set to
   <var>serializedBaseURL</var>, <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier>specifier</a> set to
   <var>normalizedSpecifier</var>, and <a href=#specifier-resolution-record-as-url id=import-map-processing-model:specifier-resolution-record-as-url-2>specifier as a URL</a> set to
   <var>asURL</var>.<li><p><a href=https://infra.spec.whatwg.org/#set-append id=import-map-processing-model:set-append data-x-internal=set-append>Append</a> <var>record</var> to <var>global</var>'s
   <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set>resolved module set</a>.</ol>
  <hr>

  <p>To <dfn id=parse-an-import-map-string>parse an import map string</dfn>, given a <a id=import-map-processing-model:string-7 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>input</var> and a
  <a id=import-map-processing-model:url-6 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>:</p>

  <ol><li><p>Let <var>parsed</var> be the result of <a href=https://infra.spec.whatwg.org/#parse-a-json-string-to-an-infra-value id=import-map-processing-model:parse-a-json-string-to-an-infra-value data-x-internal=parse-a-json-string-to-an-infra-value>parsing a JSON string to an Infra value</a> given <var>input</var>.<li><p>If <var>parsed</var> is not an <a id=import-map-processing-model:ordered-map-4 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, then throw a
   <code id=import-map-processing-model:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the top-level value needs to be a JSON object.<li><p>Let <var>sortedAndNormalizedImports</var> be an empty <a id=import-map-processing-model:ordered-map-5 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li>
    <p>If <var>parsed</var>["<code>imports</code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists data-x-internal=map-exists>exists</a>, then:</p>

    <ol><li><p>If <var>parsed</var>["<code>imports</code>"] is not an <a id=import-map-processing-model:ordered-map-6 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered
     map</a>, then throw a <code id=import-map-processing-model:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value for the "<code>imports</code>" top-level key needs to be a JSON object.<li><p>Set <var>sortedAndNormalizedImports</var> to the result of <a href=#sorting-and-normalizing-a-module-specifier-map id=import-map-processing-model:sorting-and-normalizing-a-module-specifier-map>sorting and
     normalizing a module specifier map</a> given <var>parsed</var>["<code>imports</code>"] and <var>baseURL</var>.</ol>
   <li><p>Let <var>sortedAndNormalizedScopes</var> be an empty <a id=import-map-processing-model:ordered-map-7 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li>
    <p>If <var>parsed</var>["<code>scopes</code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-2 data-x-internal=map-exists>exists</a>, then:</p>

    <ol><li><p>If <var>parsed</var>["<code>scopes</code>"] is not an <a id=import-map-processing-model:ordered-map-8 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered
     map</a>, then throw a <code id=import-map-processing-model:typeerror-3><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value for the "<code>scopes</code>" top-level key needs to be a JSON object.<li><p>Set <var>sortedAndNormalizedScopes</var> to the result of <a href=#sorting-and-normalizing-scopes id=import-map-processing-model:sorting-and-normalizing-scopes>sorting and normalizing
     scopes</a> given <var>parsed</var>["<code>scopes</code>"] and
     <var>baseURL</var>.</ol>
   <li><p>Let <var>normalizedIntegrity</var> be an empty <a id=import-map-processing-model:ordered-map-9 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li>
    <p>If <var>parsed</var>["<code>integrity</code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-3 data-x-internal=map-exists>exists</a>, then:</p>

    <ol><li><p>If <var>parsed</var>["<code>integrity</code>"] is not an <a id=import-map-processing-model:ordered-map-10 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered
     map</a>, then throw a <code id=import-map-processing-model:typeerror-4><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value for the "<code>integrity</code>" top-level key needs to be a JSON object.<li><p>Set <var>normalizedIntegrity</var> to the result of <a href=#normalizing-a-module-integrity-map id=import-map-processing-model:normalizing-a-module-integrity-map>normalizing a module
     integrity map</a> given <var>parsed</var>["<code>integrity</code>"] and
     <var>baseURL</var>.</ol>
   <li>
    <p>If <var>parsed</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-3 data-x-internal=map-key>keys</a> <a href=https://infra.spec.whatwg.org/#list-contain id=import-map-processing-model:list-contains data-x-internal=list-contains>contains</a> any items besides "<code>imports</code>", "<code>scopes</code>", or "<code>integrity</code>", then the user agent should
    <a id=import-map-processing-model:report-a-warning-to-the-console href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that an invalid top-level key was
    present in the import map.</p>

    <p class=note>This can help detect typos. It is not an error, because that would prevent any
    future extensions from being added backward-compatibly.</p>
   <li><p>Return an <a href=#import-map id=import-map-processing-model:import-map-2>import map</a> whose <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-2>imports</a> are <var>sortedAndNormalizedImports</var>,
   whose <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-2>scopes</a> are
   <var>sortedAndNormalizedScopes</var>, and whose <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity>integrity</a> are
   <var>normalizedIntegrity</var>.</ol>

  <div id=example-import-map-normalization class=example><a href=#example-import-map-normalization class=self-link></a>
   <p>The <a href=#import-map id=import-map-processing-model:import-map-3>import map</a> that results from this parsing algorithm is highly normalized.
   For example, given a base URL of <code>https://example.com/base/page.html</code>, the
   input</p>

   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;node_modules/helper/index.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

   <p>will generate an <a href=#import-map id=import-map-processing-model:import-map-4>import map</a> with <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-3>imports</a> of</p>

   <pre><code>«[
  "https://example.com/app/helper" → https://example.com/base/node_modules/helper/index.mjs
  "lodash" → https://example.com/node_modules/lodash-es/lodash.js
]»</code></pre>

   <p>and (despite nothing being present in the input string) an empty <a id=import-map-processing-model:ordered-map-11 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> for
   its <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-3>scopes</a>.</p>
  </div>

  <hr>

  <p>To <dfn id=merge-module-specifier-maps>merge module specifier maps</dfn>, given a <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map-3>module specifier map</a>
  <var>newMap</var> and a <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map-4>module specifier map</a> <var>oldMap</var>:</p>

  <ol><li><p>Let <var>mergedMap</var> be a deep copy of <var>oldMap</var>.<li>
    <p><a href=https://infra.spec.whatwg.org/#map-iterate id=import-map-processing-model:map-iterate data-x-internal=map-iterate>For each</a> <var>specifier</var> →
    <var>url</var> of <var>newMap</var>:</p>

    <ol><li>
      <p>If <var>specifier</var> <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-4 data-x-internal=map-exists>exists</a> in
      <var>oldMap</var>, then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-2 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the
       ignored rule. They may choose to avoid reporting if the rule is identical to an existing
       one.<li><p><a id=import-map-processing-model:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li><p>Set <var>mergedMap</var>[<var>specifier</var>] to <var>url</var>.</ol>
   <li><p>Return <var>mergedMap</var>.</ol>

  <p>To <dfn id=merge-existing-and-new-import-maps>merge existing and new import maps</dfn>,
  given a <a href=#concept-settings-object-global id=import-map-processing-model:concept-settings-object-global-2>global object</a> <var>global</var> and
  an <a href=#import-map id=import-map-processing-model:import-map-5>import map</a> <var>newImportMap</var>:</p>

  <ol><li>
    <p>Let <var>newImportMapScopes</var> be a deep copy of <var>newImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-4>scopes</a>.</p>

    <p class=note>We're mutating these copies and removing items from them when they are used to
    ignore scope-specific rules. This is true for <var>newImportMapScopes</var>, as well as to
    <var>newImportMapImports</var> below.</p>
   <li><p>Let <var>oldImportMap</var> be <var>global</var>'s <a href=#concept-global-import-map id=import-map-processing-model:concept-global-import-map>import map</a>.<li><p>Let <var>newImportMapImports</var> be a deep copy of <var>newImportMap</var>'s <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-4>imports</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#map-iterate id=import-map-processing-model:map-iterate-2 data-x-internal=map-iterate>For each</a> <var>scopePrefix</var> →
    <var>scopeImports</var> of <var>newImportMapScopes</var>:</p>

    <ol><li>
      <p><a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate data-x-internal=list-iterate>For each</a> <var>record</var> of <var>global</var>'s
      <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-2>resolved module set</a>:</p>

      <ol><li>
        <p>If <var>scopePrefix</var> is <var>record</var>'s <a href=#specifier-resolution-record-serialized-base-url id=import-map-processing-model:specifier-resolution-record-serialized-base-url-2>serialized base URL</a>, or if
        <var>scopePrefix</var> ends with U+002F (/) and <var>scopePrefix</var> is a <a id=import-map-processing-model:code-unit-prefix href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit
        prefix</a> of <var>record</var>'s <a href=#specifier-resolution-record-serialized-base-url id=import-map-processing-model:specifier-resolution-record-serialized-base-url-3>serialized base URL</a>,
        then:</p>

        <ol><li>
          <p><a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>specifierKey</var> →
          <var>resolutionResult</var> of <var>scopeImports</var>:</p>

          <ol><li>
            <p>If <var>specifierKey</var> is <var>record</var>'s <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier-2>specifier</a>, or if all of the
            following conditions are true:</p>

            <ul><li><p><var>specifierKey</var> ends with U+002F (/);<li><p><var>specifierKey</var> is a <a id=import-map-processing-model:code-unit-prefix-2 href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of
             <var>record</var>'s <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier-3>specifier</a>;<li><p>either <var>record</var>'s <a href=#specifier-resolution-record-as-url id=import-map-processing-model:specifier-resolution-record-as-url-3>specifier as a URL</a> is null or
             <a id=import-map-processing-model:is-special-2 href=https://url.spec.whatwg.org/#is-special data-x-internal=is-special>is special</a>,</ul>

            <p>then:</p>

            <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-3 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the
             ignored rule. They may choose to avoid reporting if the rule is identical to an existing
             one.<li><p>Remove <var>scopeImports</var>[<var>specifierKey</var>].</ol>
           </ol>
         </ol>
       </ol>

      <p class=note>Implementers are encouraged to implement a more efficient matching
      algorithm when working with the <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-3>resolved module set</a>. As guidance, the number of
      resolved/mapped modules in a large application can be on the order of thousands.</p>
     <li><p>If <var>scopePrefix</var> <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-5 data-x-internal=map-exists>exists</a> in
     <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-5>scopes</a>, then
     set <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-6>scopes</a>[<var>scopePrefix</var>] to the result of
     <a href=#merge-module-specifier-maps id=import-map-processing-model:merge-module-specifier-maps>merging module specifier maps</a>, given
     <var>scopeImports</var> and <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-7>scopes</a>[<var>scopePrefix</var>].<li><p>Otherwise, set <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-8>scopes</a>[<var>scopePrefix</var>] to
     <var>scopeImports</var>.</ol>
   <li>
    <p><a href=https://infra.spec.whatwg.org/#map-iterate id=import-map-processing-model:map-iterate-3 data-x-internal=map-iterate>For each</a> <var>url</var> →
    <var>integrity</var> of <var>newImportMap</var>'s <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity-2>integrity</a>:</p>

    <ol><li>
      <p>If <var>url</var> <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-6 data-x-internal=map-exists>exists</a> in <var>oldImportMap</var>'s
      <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity-3>integrity</a>, then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-4 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the
       ignored rule. They may choose to avoid reporting if the rule is identical to an existing
       one.<li><p><a id=import-map-processing-model:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li><p>Set <var>oldImportMap</var>'s <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity-4>integrity</a>[<var>url</var>] to
     <var>integrity</var>.</ol>
   <li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-3 data-x-internal=list-iterate>For each</a> <var>record</var> of <var>global</var>'s
    <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-4>resolved module set</a>:</p>

    <ol><li>
      <p><a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-4 data-x-internal=list-iterate>For each</a> <var>specifier</var> → <var>url</var> of
      <var>newImportMapImports</var>:</p>

      <ol><li>
        <p>If <var>specifier</var> <a id=import-map-processing-model:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> <var>record</var>'s <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier-4>specifier</a>, then:</p>

        <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-5 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the
         ignored rule. They may choose to avoid reporting if the rule is identical to an existing
         one.<li><p>Remove <var>newImportMapImports</var>[<var>specifier</var>].</ol>
       </ol>
     </ol>
   <li><p>Set <var>oldImportMap</var>'s <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-5>imports</a> to
   the result of <a href=#merge-module-specifier-maps id=import-map-processing-model:merge-module-specifier-maps-2>merge module specifier maps</a>,
   given <var>newImportMapImports</var> and <var>oldImportMap</var>'s <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-6>imports</a>.</ol>

  <p>The above algorithm merges a new import map into the given <a href=#environment-settings-object id=import-map-processing-model:environment-settings-object-2>environment settings
  object</a>'s <a href=#global-object id=import-map-processing-model:global-object>global object</a>'s <a href=#import-map id=import-map-processing-model:import-map-6>import map</a>. Let's examine a few
  examples:</p>

  <div id=example-import-map-merge-unrelated class=example><a href=#example-import-map-merge-unrelated class=self-link></a>
   <p>There are two cases when rules of the new import map don't get merged into the existing
   one.</p>

   <ol><li><p>The new import map rule has the exact same scope and specifier as a rule in the existing
    import map. We'll call that "conflicting rule".<li><p>The new import map rule may impact the resolution of an already resolved module. We'll
    call that "impacted already resolved module".</ol>

   <p>When the new import map has no conflicting rules, and there are no impacted resolved modules,
   the resulting map would be a combination of the new and existing maps. Rules that would have
   individually impacted similar modules (e.g. "/app/" and "/app/helper") but are not an exact
   match are not conflicting, and all make it to the merged map.</p>

   <p>So, the following existing and new import maps:</p>
   <pre><code class='json'><c- p>{</c->
   <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- u>&quot;./original-app/&quot;</c-><c- p>,</c->
  <c- p>}</c->
<c- p>}</c-></code>
<code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/index.mjs&quot;</c->
  <c- p>},</c->
  <c- u>&quot;scopes&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/js&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- u>&quot;./js-app/&quot;</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
   <p>Would be equivalent to the following single import map:</p>
   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- u>&quot;./original-app/&quot;</c-><c- p>,</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/index.mjs&quot;</c->
  <c- p>},</c->
  <c- u>&quot;scopes&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/js&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- u>&quot;./js-app/&quot;</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
  </div>

  <div id=example-import-map-merge-conflict-imports class=example><a href=#example-import-map-merge-conflict-imports class=self-link></a>
   <p>When the new import map impacts an already resolved module, that rule gets dropped from the
   import map.</p>

   <p>So, if the <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-5>resolved module set</a> already contains the "<code>/app/helper</code>", the following new import map:</p>
   <pre><code class='json'><c- p>{</c->
   <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/index.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
   <p>Would be equivalent to the following one:</p>
   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
  </div>

  <div id=example-import-map-merge-conflict-scopes class=example><a href=#example-import-map-merge-conflict-scopes class=self-link></a>
   <p>The same is true for rules that impact already resolved modules defined in specific scopes.
   If we already resolved "<code>/app/helper</code>" from "<code>/app/main.mjs</code>" the following new import map:</p>
   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;scopes&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/index.mjs&quot;</c->
    <c- p>}</c->
  <c- p>},</c->
   <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
   <p>Would similarly be equivalent to:</p>
   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
  </div>

  <div id=example-import-map-merge-conflict-imports-and-scopes class=example><a href=#example-import-map-merge-conflict-imports-and-scopes class=self-link></a>
   <p>We could also have cases where a single already-resolved module specifier has multiple rules
   for its resolution, depending on the referring script. In such cases, only the relevant rules
   would not be added to the map.</p>
   <p>For example, if we already resolved "<code>/app/helper</code>" from "<code>/app/vendor/main.mjs</code>", the following new import map:</p>
   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;scopes&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/index.mjs&quot;</c->
    <c- p>},</c->
    <c- u>&quot;/app/vendor/&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- u>&quot;./vendor_helper/&quot;</c->
    <c- p>},</c->
    <c- u>&quot;/vendor/&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/vendor_index.mjs&quot;</c->
    <c- p>}</c->
  <c- p>},</c->
   <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
    <c- u>&quot;/app/&quot;</c-><c- o>:</c-> <c- u>&quot;./general_app_path/&quot;</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./other_path/helper/index.mjs&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
   <p>Would be equivalent to:</p>
   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;scopes&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/vendor/&quot;</c-><c- o>:</c-> <c- p>{</c->
      <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/vendor_index.mjs&quot;</c->
    <c- p>}</c->
  <c- p>},</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

  <p>This is achieved by the fact that the merge algorithm tracks already resolved modules
  and removes rules affecting them from new import maps before they are merged into the existing
  one.</p>
  </div>

  <div id=example-import-map-merge-two-map-conflict class=example><a href=#example-import-map-merge-two-map-conflict class=self-link></a>
   <p>When the new import map has conflicting rules to the existing import map, with no impacted
   already resolved modules, the existing import map rules persist.</p>

   <p>For example, the following existing and new import maps:</p>
   <pre><code class='json'><c- p>{</c->
   <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/index.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code>
<code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./main/helper/index.mjs&quot;</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
   <p>Would be equivalent to the following single import map:</p>
   <pre><code class='json'><c- p>{</c->
  <c- u>&quot;imports&quot;</c-><c- o>:</c-> <c- p>{</c->
    <c- u>&quot;/app/helper&quot;</c-><c- o>:</c-> <c- u>&quot;./helper/index.mjs&quot;</c-><c- p>,</c->
    <c- u>&quot;lodash&quot;</c-><c- o>:</c-> <c- u>&quot;/node_modules/lodash-es/lodash.js&quot;</c-><c- p>,</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>
  </div>

  <p>To <dfn id=sorting-and-normalizing-a-module-specifier-map>sort and normalize a module
  specifier map</dfn>, given an <a id=import-map-processing-model:ordered-map-12 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> <var>originalMap</var> and a
  <a id=import-map-processing-model:url-7 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>:</p>

  <ol><li><p>Let <var>normalized</var> be an empty <a id=import-map-processing-model:ordered-map-13 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-5 data-x-internal=list-iterate>For each</a> <var>specifierKey</var> → <var>value</var> of
    <var>originalMap</var>:</p>

    <ol><li><p>Let <var>normalizedSpecifierKey</var> be the result of <a href=#normalizing-a-specifier-key id=import-map-processing-model:normalizing-a-specifier-key>normalizing a specifier
     key</a> given <var>specifierKey</var> and <var>baseURL</var>.<li><p>If <var>normalizedSpecifierKey</var> is null, then <a id=import-map-processing-model:continue-3 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>
      <p>If <var>value</var> is not a <a id=import-map-processing-model:string-8 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>, then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-6 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that
       addresses need to be strings.<li><p>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to null.<li><p><a id=import-map-processing-model:continue-4 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li><p>Let <var>addressURL</var> be the result of <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier>resolving a URL-like module
     specifier</a> given <var>value</var> and <var>baseURL</var>.<li>
      <p>If <var>addressURL</var> is null, then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-7 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that the
       address was invalid.<li><p>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to null.<li><p><a id=import-map-processing-model:continue-5 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li>
      <p>If <var>specifierKey</var> ends with U+002F (/), and the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=import-map-processing-model:concept-url-serializer data-x-internal=concept-url-serializer>serialization</a> of <var>addressURL</var> does not end
      with U+002F (/), then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-8 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that an
       invalid address was given for the specifier key <var>specifierKey</var>; since
       <var>specifierKey</var> ends with a slash, the address needs to as well.<li><p>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to null.<li><p><a id=import-map-processing-model:continue-6 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li><p>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to
     <var>addressURL</var>.</ol>
   <li><p>Return the result of <a href=https://infra.spec.whatwg.org/#map-sort-in-descending-order id=import-map-processing-model:map-sort-descending data-x-internal=map-sort-descending>sorting in descending order</a>
   <var>normalized</var>, with an entry <var>a</var> being less than an entry <var>b</var> if
   <var>a</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-4 data-x-internal=map-key>key</a> is <a id=import-map-processing-model:code-unit-less-than href=https://infra.spec.whatwg.org/#code-unit-less-than data-x-internal=code-unit-less-than>code unit less than</a>
   <var>b</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-5 data-x-internal=map-key>key</a>.</ol>

  <p>To <dfn id=sorting-and-normalizing-scopes>sort and normalize scopes</dfn>, given an
  <a id=import-map-processing-model:ordered-map-14 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> <var>originalMap</var> and a <a id=import-map-processing-model:url-8 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>:</p>

  <ol><li><p>Let <var>normalized</var> be an empty <a id=import-map-processing-model:ordered-map-15 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-6 data-x-internal=list-iterate>For each</a> <var>scopePrefix</var> →
    <var>potentialSpecifierMap</var> of <var>originalMap</var>:</p>

    <ol><li><p>If <var>potentialSpecifierMap</var> is not an <a id=import-map-processing-model:ordered-map-16 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, then throw a
     <code id=import-map-processing-model:typeerror-5><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value of the scope with prefix
     <var>scopePrefix</var> needs to be a JSON object.<li><p>Let <var>scopePrefixURL</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=import-map-processing-model:url-parser data-x-internal=url-parser>URL
     parsing</a> <var>scopePrefix</var> with <var>baseURL</var>.<li>
      <p>If <var>scopePrefixURL</var> is failure, then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-9 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> that the scope prefix
       URL was not parseable.<li><p><a id=import-map-processing-model:continue-7 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li><p>Let <var>normalizedScopePrefix</var> be the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=import-map-processing-model:concept-url-serializer-2 data-x-internal=concept-url-serializer>serialization</a> of <var>scopePrefixURL</var>.<li><p>Set <var>normalized</var>[<var>normalizedScopePrefix</var>] to the result of
     <a href=#sorting-and-normalizing-a-module-specifier-map id=import-map-processing-model:sorting-and-normalizing-a-module-specifier-map-2>sorting and normalizing a module specifier map</a> given
     <var>potentialSpecifierMap</var> and <var>baseURL</var>.</ol>
   <li><p>Return the result of <a href=https://infra.spec.whatwg.org/#map-sort-in-descending-order id=import-map-processing-model:map-sort-descending-2 data-x-internal=map-sort-descending>sorting in descending
   order</a> <var>normalized</var>, with an entry <var>a</var> being less than an entry
   <var>b</var> if <var>a</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-6 data-x-internal=map-key>key</a> is <a id=import-map-processing-model:code-unit-less-than-2 href=https://infra.spec.whatwg.org/#code-unit-less-than data-x-internal=code-unit-less-than>code unit less
   than</a> <var>b</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-7 data-x-internal=map-key>key</a>.</ol>

  <p class=note>In the above two algorithms, sorting keys and scopes in descending order has the
  effect of putting "<code>foo/bar/</code>" before "<code>foo/</code>". This in
  turn gives "<code>foo/bar/</code>" a higher priority than "<code>foo/</code>"
  during <a href=#resolve-a-module-specifier id=import-map-processing-model:resolve-a-module-specifier>module specifier resolution</a>.</p>

  <p>To <dfn id=normalizing-a-module-integrity-map>normalize a module integrity map</dfn>,
  given an <a id=import-map-processing-model:ordered-map-17 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> <var>originalMap</var>:</p>

  <ol><li><p>Let <var>normalized</var> be an empty <a id=import-map-processing-model:ordered-map-18 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-7 data-x-internal=list-iterate>For each</a> <var>key</var> → <var>value</var> of
    <var>originalMap</var>:</p>

    <ol><li>
      <p>Let <var>resolvedURL</var> be the result of <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier-2>resolving a URL-like module
      specifier</a> given <var>key</var> and <var>baseURL</var>.</p>

      <p class=note>Unlike "<code>imports</code>", keys of the integrity map are treated
      as URLs, not module specifiers. However, we use the <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier-3>resolve a URL-like module specifier</a> algorithm to prohibit "bare" relative
      URLs like <code>foo</code>, which could be mistaken for module specifiers.</p>
     <li>
      <p>If <var>resolvedURL</var> is null, then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-10 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that
       the key failed to resolve.<li><p><a id=import-map-processing-model:continue-8 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li>
      <p>If <var>value</var> is not a <a id=import-map-processing-model:string-9 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>, then:</p>

      <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-11 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that
       <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=import-map-processing-model:concept-request-integrity-metadata-2 data-x-internal=concept-request-integrity-metadata>integrity metadata</a> values need to
       be <a href=https://infra.spec.whatwg.org/#string id=import-map-processing-model:string-10 data-x-internal=string>strings</a>.<li><p><a id=import-map-processing-model:continue-9 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li><p>Set <var>normalized</var>[<var>resolvedURL</var>] to <var>value</var>.</ol>
   <li><p>Return <var>normalized</var>.</ol>

  <p>To <dfn id=normalizing-a-specifier-key>normalize a specifier key</dfn>, given a <a id=import-map-processing-model:string-11 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>specifierKey</var> and a <a id=import-map-processing-model:url-9 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>:</p>

  <ol><li>
    <p>If <var>specifierKey</var> is the empty string, then:</p>

    <ol><li><p>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-12 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that specifier keys may not be the empty string.<li><p>Return null.</ol>
   <li><p>Let <var>url</var> be the result of <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier-4>resolving a URL-like module specifier</a>, given <var>specifierKey</var> and <var>baseURL</var>.<li><p>If <var>url</var> is not null, then return the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=import-map-processing-model:concept-url-serializer-3 data-x-internal=concept-url-serializer>serialization</a> of <var>url</var>.<li><p>Return <var>specifierKey</var>.</ol>


  <h4 id=javascript-specification-host-hooks><span class=secno>8.1.6</span> JavaScript specification host hooks<a href=#javascript-specification-host-hooks class=self-link></a></h4>

  <p>The JavaScript specification contains a number of <a id=javascript-specification-host-hooks:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> abstract
  operations, that vary depending on the host environment. This section defines them for user
  agent hosts.</p>

  <h5 id=the-hostensurecanaddprivateelement-implementation><span class=secno>8.1.6.1</span> <dfn>HostEnsureCanAddPrivateElement</dfn>(<var>O</var>)<a href=#the-hostensurecanaddprivateelement-implementation class=self-link></a></h5>

  <p>JavaScript contains an <a id=the-hostensurecanaddprivateelement-implementation:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostensurecanaddprivateelement id=the-hostensurecanaddprivateelement-implementation:js-hostensurecanaddprivateelement data-x-internal=js-hostensurecanaddprivateelement>HostEnsureCanAddPrivateElement</a>(<var>O</var>)
  abstract operation. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a>

  <ol><li><p>If <var>O</var> is a <code id=the-hostensurecanaddprivateelement-implementation:windowproxy><a href=nav-history-apis.html#windowproxy>WindowProxy</a></code> object, or <a id=the-hostensurecanaddprivateelement-implementation:implements href=https://webidl.spec.whatwg.org/#implements data-x-internal=implements>implements</a>
   <code id=the-hostensurecanaddprivateelement-implementation:location><a href=nav-history-apis.html#location>Location</a></code>, then return <a id=the-hostensurecanaddprivateelement-implementation:throwcompletion href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(a new
   <code id=the-hostensurecanaddprivateelement-implementation:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>).<li><p>Return <a id=the-hostensurecanaddprivateelement-implementation:normalcompletion href=https://tc39.es/ecma262/#sec-normalcompletion data-x-internal=normalcompletion>NormalCompletion</a>(unused).</ol>

  <p class=note>JavaScript private fields can be applied to arbitrary objects. Since this can
  dramatically complicate implementation for particularly-exotic host objects, the JavaScript
  language specification provides this hook to allow hosts to reject private fields on objects
  meeting a host-defined criteria. In the case of HTML, <code id=the-hostensurecanaddprivateelement-implementation:windowproxy-2><a href=nav-history-apis.html#windowproxy>WindowProxy</a></code> and
  <code id=the-hostensurecanaddprivateelement-implementation:location-2><a href=nav-history-apis.html#location>Location</a></code> have complicated semantics — particularly around navigation and
  security — that make implementation of private field semantics challenging, so our
  implementation simply rejects those objects.</p>

  <h5 id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg)><span class=secno>8.1.6.2</span> <dfn>HostEnsureCanCompileStrings</dfn>(<var>realm</var>,
  <var>parameterStrings</var>, <var>bodyString</var>, <var>codeString</var>, <var>compilationType</var>,
  <var>parameterArgs</var>, <var>bodyArg</var>)<a href=#hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg) class=self-link></a></h5>

  <p>JavaScript contains an <a id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg):implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-dynamic-code-brand-checks/#sec-hostensurecancompilestrings id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg):js-hostensurecancompilestrings data-x-internal=js-hostensurecancompilestrings>HostEnsureCanCompileStrings</a> abstract operation,
  redefined by the <cite>Dynamic Code Brand Checks</cite> proposal. User agents must use
  the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <a href=references.html#refsJSDYNAMICCODEBRANDCHECKS>[JSDYNAMICCODEBRANDCHECKS]</a>

  <ol><li><p>Perform ? <a href=https://w3c.github.io/webappsec-csp/#can-compile-strings id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg):csp-ensurecspdoesnotblockstringcompilation data-x-internal=csp-ensurecspdoesnotblockstringcompilation>EnsureCSPDoesNotBlockStringCompilation</a>(<var>realm</var>,
   <var>parameterStrings</var>, <var>bodyString</var>, <var>codeString</var>,
   <var>compilationType</var>, <var>parameterArgs</var>, <var>bodyArg</var>).
   <a href=references.html#refsCSP>[CSP]</a></ol>

  <h5 id=hostgetcodeforeval(argument)><span class=secno>8.1.6.3</span> <dfn>HostGetCodeForEval</dfn>(<var>argument</var>)<a href=#hostgetcodeforeval(argument) class=self-link></a></h5>

  <p>The <cite>Dynamic Code Brand Checks</cite> proposal contains an
  <a id=hostgetcodeforeval(argument):implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-dynamic-code-brand-checks/#sec-hostgetcodeforeval id=hostgetcodeforeval(argument):js-hostgetcodeforeval data-x-internal=js-hostgetcodeforeval>HostGetCodeForEval</a>(<var>argument</var>) abstract operation.
  User agents must use the following implementation: <a href=references.html#refsJSDYNAMICCODEBRANDCHECKS>[JSDYNAMICCODEBRANDCHECKS]</a>

  <ol><li><p>If <var>argument</var> is a <code id=hostgetcodeforeval(argument):tt-trustedscript><a data-x-internal=tt-trustedscript href=https://w3c.github.io/trusted-types/dist/spec/#trusted-script>TrustedScript</a></code> object,
   then return <var>argument</var>'s <a href=https://w3c.github.io/trusted-types/dist/spec/#trustedscript-data id=hostgetcodeforeval(argument):tt-trustedscript-data data-x-internal=tt-trustedscript-data>data</a>.<li><p>Otherwise, return no-code.</ol>

  <h5 id=the-hostpromiserejectiontracker-implementation><span class=secno>8.1.6.4</span> <dfn>HostPromiseRejectionTracker</dfn>(<var>promise</var>, <var>operation</var>)<a href=#the-hostpromiserejectiontracker-implementation class=self-link></a></h5>

  <p>JavaScript contains an <a id=the-hostpromiserejectiontracker-implementation:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-host-promise-rejection-tracker id=the-hostpromiserejectiontracker-implementation:js-hostpromiserejectiontracker data-x-internal=js-hostpromiserejectiontracker>HostPromiseRejectionTracker</a>(<var>promise</var>,
  <var>operation</var>) abstract operation. User agents must use the following implementation:
  <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>script</var> be the <a href=#running-script id=the-hostpromiserejectiontracker-implementation:running-script>running script</a>.<li><p>If <var>script</var> is a <a href=#classic-script id=the-hostpromiserejectiontracker-implementation:classic-script>classic script</a> and <var>script</var>'s <a href=#muted-errors id=the-hostpromiserejectiontracker-implementation:muted-errors>muted
   errors</a> is true, then return.<li><p>Let <var>settingsObject</var> be the <a href=#current-settings-object id=the-hostpromiserejectiontracker-implementation:current-settings-object>current settings object</a>.<li><p>If <var>script</var> is not null, then set <var>settingsObject</var> to
   <var>script</var>'s <a href=#settings-object id=the-hostpromiserejectiontracker-implementation:settings-object>settings
   object</a>.<li><p>Let <var>global</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-global id=the-hostpromiserejectiontracker-implementation:concept-settings-object-global>global object</a>.<li>
    <p>If <var>operation</var> is "<code>reject</code>", then:</p>

    <ol><li><p><a href=https://infra.spec.whatwg.org/#list-append id=the-hostpromiserejectiontracker-implementation:list-append data-x-internal=list-append>Append</a> <var>promise</var> to <var>global</var>'s
     <a href=#about-to-be-notified-rejected-promises-list id=the-hostpromiserejectiontracker-implementation:about-to-be-notified-rejected-promises-list>about-to-be-notified rejected promises list</a>.</ol>
   <li>
    <p>If <var>operation</var> is "<code>handle</code>", then:</p>

    <ol><li><p>If <var>global</var>'s <a href=#about-to-be-notified-rejected-promises-list id=the-hostpromiserejectiontracker-implementation:about-to-be-notified-rejected-promises-list-2>about-to-be-notified rejected promises list</a> <a href=https://infra.spec.whatwg.org/#list-contain id=the-hostpromiserejectiontracker-implementation:list-contains data-x-internal=list-contains>contains</a> <var>promise</var>, then <a href=https://infra.spec.whatwg.org/#list-remove id=the-hostpromiserejectiontracker-implementation:list-remove data-x-internal=list-remove>remove</a> <var>promise</var> from that list and return.<li><p>If <var>global</var>'s <a href=#outstanding-rejected-promises-weak-set id=the-hostpromiserejectiontracker-implementation:outstanding-rejected-promises-weak-set>outstanding rejected promises weak set</a> does not
     <a href=https://infra.spec.whatwg.org/#list-contain id=the-hostpromiserejectiontracker-implementation:list-contains-2 data-x-internal=list-contains>contain</a> <var>promise</var>, then return.<li><p><a href=https://infra.spec.whatwg.org/#list-remove id=the-hostpromiserejectiontracker-implementation:list-remove-2 data-x-internal=list-remove>Remove</a> <var>promise</var> from <var>global</var>'s
     <a href=#outstanding-rejected-promises-weak-set id=the-hostpromiserejectiontracker-implementation:outstanding-rejected-promises-weak-set-2>outstanding rejected promises weak set</a>.<li><p><a href=#queue-a-global-task id=the-hostpromiserejectiontracker-implementation:queue-a-global-task>Queue a global task</a> on the <a href=#dom-manipulation-task-source id=the-hostpromiserejectiontracker-implementation:dom-manipulation-task-source>DOM manipulation task source</a> given
     <var>global</var> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-hostpromiserejectiontracker-implementation:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=the-hostpromiserejectiontracker-implementation:event-rejectionhandled><a href=indices.html#event-rejectionhandled>rejectionhandled</a></code> at <var>global</var>, using
     <code id=the-hostpromiserejectiontracker-implementation:promiserejectionevent><a href=#promiserejectionevent>PromiseRejectionEvent</a></code>, with the <code id=the-hostpromiserejectiontracker-implementation:dom-promiserejectionevent-promise><a href=#dom-promiserejectionevent-promise>promise</a></code> attribute initialized to
     <var>promise</var>, and the <code id=the-hostpromiserejectiontracker-implementation:dom-promiserejectionevent-reason><a href=#dom-promiserejectionevent-reason>reason</a></code>
     attribute initialized to <var>promise</var>.[[PromiseResult]].</ol>
   </ol>

  <h5 id=hostsystemutcepochnanoseconds><span class=secno>8.1.6.5</span> <dfn>HostSystemUTCEpochNanoseconds</dfn>(<var>global</var>)<a href=#hostsystemutcepochnanoseconds class=self-link></a></h5>

  <p>The Temporal proposal contains an <a id=hostsystemutcepochnanoseconds:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-temporal/#sec-hostsystemutcepochnanoseconds id=hostsystemutcepochnanoseconds:js-hostsystemutcepochnanoseconds data-x-internal=js-hostsystemutcepochnanoseconds>HostSystemUTCEpochNanoseconds</a> abstract operation.
  User agents must use the following implementation: <a href=references.html#refsJSTEMPORAL>[JSTEMPORAL]</a></p>

  <ol><li><p>Let <var>settingsObject</var> be <var>global</var>'s <a href=#relevant-settings-object id=hostsystemutcepochnanoseconds:relevant-settings-object>relevant settings
   object</a>.<li><p>Let <var>time</var> be <var>settingsObject</var>'s <a id=hostsystemutcepochnanoseconds:current-wall-time href=https://w3c.github.io/hr-time/#dfn-current-wall-time data-x-internal=current-wall-time>current wall
   time</a>.<li><p>Let <var>ns</var> be the number of nanoseconds from the <a id=hostsystemutcepochnanoseconds:unix-epoch href=https://w3c.github.io/hr-time/#dfn-unix-epoch data-x-internal=unix-epoch>Unix epoch</a> to
   <var>time</var>, rounded to the nearest integer.<li><p>Return the result of <a id=hostsystemutcepochnanoseconds:clamping href=https://tc39.es/ecma262/#clamping data-x-internal=clamping>clamping</a> <var>ns</var> between
   <a id=hostsystemutcepochnanoseconds:nsmininstant href=https://tc39.es/proposal-temporal/#eqn-nsMinInstant data-x-internal=nsmininstant>nsMinInstant</a> and <a id=hostsystemutcepochnanoseconds:nsmaxinstant href=https://tc39.es/proposal-temporal/#eqn-nsMaxInstant data-x-internal=nsmaxinstant>nsMaxInstant</a>.</ol>

  <h5 id=integration-with-javascript-jobs><span class=secno>8.1.6.6</span> Job-related host hooks<a href=#integration-with-javascript-jobs class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Incumbent_settings_object_tracking title="The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.">Reference/Global_Objects/Promise#Incumbent_settings_object_tracking</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>50+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The JavaScript specification defines Jobs to be scheduled and run later by the host, as well as
  <a href=https://tc39.es/ecma262/#sec-jobcallback-records id=integration-with-javascript-jobs:jobcallback-record data-x-internal=jobcallback-record>JobCallback Records</a> which encapsulate JavaScript
  functions that are called as part of jobs. The JavaScript specification contains a number of
  <a id=integration-with-javascript-jobs:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> abstract operations that lets the host define how jobs are
  scheduled and how JobCallbacks are handled. HTML uses these abstract operations to <span id=incumbent-settings-object-tracking-in-promises>track the <a href=#incumbent-settings-object id=integration-with-javascript-jobs:incumbent-settings-object>incumbent settings
  object</a> in promises and <code id=integration-with-javascript-jobs:finalizationregistry><a data-x-internal=finalizationregistry href=https://tc39.es/ecma262/#sec-finalization-registry-objects>FinalizationRegistry</a></code> callbacks</span> by saving and
  restoring the <a href=#incumbent-settings-object id=integration-with-javascript-jobs:incumbent-settings-object-2>incumbent settings object</a> and a <a id=integration-with-javascript-jobs:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution
  context</a> for the <a href=#active-script id=integration-with-javascript-jobs:active-script>active script</a> in JobCallbacks. This section defines them for
  user agent hosts.</p>

  <h6 id=hostcalljobcallback><span class=secno>8.1.6.6.1</span> <dfn>HostCallJobCallback</dfn>(<var>callback</var>, <var>V</var>,
  <var>argumentsList</var>)<a href=#hostcalljobcallback class=self-link></a></h6>

  <p>JavaScript contains an <a id=hostcalljobcallback:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostcalljobcallback id=hostcalljobcallback:js-hostcalljobcallback data-x-internal=js-hostcalljobcallback>HostCallJobCallback</a>(<var>callback</var>, <var>V</var>,
  <var>argumentsList</var>) abstract operation to let hosts restore state when invoking JavaScript
  callbacks from inside tasks. User agents must use the following implementation:
  <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>incumbent settings</var> be
   <var>callback</var>.[[HostDefined]].[[IncumbentSettings]].<li><p>Let <var>script execution context</var> be
   <var>callback</var>.[[HostDefined]].[[ActiveScriptContext]].<li>
    <p><a href=#prepare-to-run-a-callback id=hostcalljobcallback:prepare-to-run-a-callback>Prepare to run a callback</a> with <var>incumbent settings</var>.</p>

    <p class=note>This affects the <a href=#concept-incumbent-everything id=hostcalljobcallback:concept-incumbent-everything>incumbent</a>
    concept while the callback runs.</p>
   <li>
    <p>If <var>script execution context</var> is not null, then <a href=https://infra.spec.whatwg.org/#stack-push id=hostcalljobcallback:stack-push data-x-internal=stack-push>push</a> <var>script execution context</var> onto the <a id=hostcalljobcallback:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution
    context stack</a>.</p>

    <p class=note>This affects the <a href=#active-script id=hostcalljobcallback:active-script>active script</a> while the callback runs.</p>
   <li><p>Let <var>result</var> be <a id=hostcalljobcallback:call href=https://tc39.es/ecma262/#sec-call data-x-internal=call>Call</a>(<var>callback</var>.[[Callback]], <var>V</var>,
   <var>argumentsList</var>).<li><p>If <var>script execution context</var> is not null, then <a href=https://infra.spec.whatwg.org/#stack-pop id=hostcalljobcallback:stack-pop data-x-internal=stack-pop>pop</a> <var>script execution context</var> from the <a id=hostcalljobcallback:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context
   stack</a>.<li><p><a href=#clean-up-after-running-a-callback id=hostcalljobcallback:clean-up-after-running-a-callback>Clean up after running a callback</a> with <var>incumbent
   settings</var>.<li><p>Return <var>result</var>.</ol>

  <h6 id=hostenqueuefinalizationregistrycleanupjob><span class=secno>8.1.6.6.2</span> <dfn>HostEnqueueFinalizationRegistryCleanupJob</dfn>(<var>finalizationRegistry</var>)<a href=#hostenqueuefinalizationregistrycleanupjob class=self-link></a></h6>

  <p>JavaScript has the ability to register objects with <code id=hostenqueuefinalizationregistrycleanupjob:finalizationregistry><a data-x-internal=finalizationregistry href=https://tc39.es/ecma262/#sec-finalization-registry-objects>FinalizationRegistry</a></code> objects,
  in order to schedule a cleanup action if they are found to be garbage collected. The JavaScript
  specification contains an <a id=hostenqueuefinalizationregistrycleanupjob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-host-cleanup-finalization-registry id=hostenqueuefinalizationregistrycleanupjob:js-hostenqueuefinalizationregistrycleanupjob data-x-internal=js-hostenqueuefinalizationregistrycleanupjob>HostEnqueueFinalizationRegistryCleanupJob</a>(<var>finalizationRegistry</var>)
  abstract operation to schedule the cleanup action.</p>

  <p class=note>The timing and occurrence of cleanup work is <a id=hostenqueuefinalizationregistrycleanupjob:implementation-defined-2 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>
  in the JavaScript specification. User agents might differ in when and whether an object is garbage
  collected, affecting both whether the return value of the <code id=hostenqueuefinalizationregistrycleanupjob:weakref.prototype.deref()><a data-x-internal=weakref.prototype.deref() href=https://tc39.es/ecma262/#sec-weak-ref.prototype.deref>WeakRef.prototype.deref()</a></code>
  method is undefined, and whether <code id=hostenqueuefinalizationregistrycleanupjob:finalizationregistry-2><a data-x-internal=finalizationregistry href=https://tc39.es/ecma262/#sec-finalization-registry-objects>FinalizationRegistry</a></code> cleanup callbacks occur. There
  are well-known cases in popular web browsers where objects are not accessible to JavaScript, but
  they remain retained by the garbage collector indefinitely. HTML clears kept-alive
  <code id=hostenqueuefinalizationregistrycleanupjob:weakref><a data-x-internal=weakref href=https://tc39.es/ecma262/#sec-weak-ref-objects>WeakRef</a></code> objects in the <a href=#perform-a-microtask-checkpoint id=hostenqueuefinalizationregistrycleanupjob:perform-a-microtask-checkpoint>perform a microtask checkpoint</a> algorithm. Authors
  would be best off not depending on the timing details of garbage collection implementations.</p>

  <p>Cleanup actions do not take place interspersed with synchronous JavaScript execution, but
  rather happen in queued <a href=#concept-task id=hostenqueuefinalizationregistrycleanupjob:concept-task>tasks</a>. User agents must use the
  following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>global</var> be <var>finalizationRegistry</var>.[[Realm]]'s <a href=#global-object id=hostenqueuefinalizationregistrycleanupjob:global-object>global
   object</a>.<li>
    <p><a href=#queue-a-global-task id=hostenqueuefinalizationregistrycleanupjob:queue-a-global-task>Queue a global task</a> on the <dfn id=javascript-engine-task-source>JavaScript engine task source</dfn> given
    <var>global</var> to perform the following steps:</p>

    <ol><li><p>Let <var>entry</var> be
     <var>finalizationRegistry</var>.[[CleanupCallback]].[[Callback]].[[Realm]]'s <a href=#concept-realm-settings-object id=hostenqueuefinalizationregistrycleanupjob:concept-realm-settings-object>environment settings object</a>.<li><p><a href=#check-if-we-can-run-script id=hostenqueuefinalizationregistrycleanupjob:check-if-we-can-run-script>Check if we can run script</a> with <var>entry</var>. If this returns "do not
     run", then return.<li>
      <p><a href=#prepare-to-run-script id=hostenqueuefinalizationregistrycleanupjob:prepare-to-run-script>Prepare to run script</a> with <var>entry</var>.</p>

      <p class=note>This affects the <a href=#concept-entry-everything id=hostenqueuefinalizationregistrycleanupjob:concept-entry-everything>entry</a> concept
      while the cleanup callback runs.</p>
     <li><p>Let <var>result</var> be the result of performing
     <a id=hostenqueuefinalizationregistrycleanupjob:cleanupfinalizationregistry href=https://tc39.es/ecma262/#sec-cleanup-finalization-registry data-x-internal=cleanupfinalizationregistry>CleanupFinalizationRegistry</a>(<var>finalizationRegistry</var>).<li><p><a href=#clean-up-after-running-script id=hostenqueuefinalizationregistrycleanupjob:clean-up-after-running-script>Clean up after running script</a> with <var>entry</var>.<li><p>If <var>result</var> is an <a href=https://tc39.es/ecma262/#sec-completion-record-specification-type id=hostenqueuefinalizationregistrycleanupjob:completion-record data-x-internal=completion-record>abrupt completion</a>,
     then <a href=#report-an-exception id=hostenqueuefinalizationregistrycleanupjob:report-an-exception>report an exception</a> given by <var>result</var>.[[Value]] for
     <var>global</var>.</ol>
   </ol>

  <h6 id=hostenqueuegenericjob><span class=secno>8.1.6.6.3</span> <dfn>HostEnqueueGenericJob</dfn>(<var>job</var>,
  <var>realm</var>)<a href=#hostenqueuegenericjob class=self-link></a></h6>

  <p>JavaScript contains an <a id=hostenqueuegenericjob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostenqueuegenericjob id=hostenqueuegenericjob:js-hostenqueuegenericjob data-x-internal=js-hostenqueuegenericjob>HostEnqueueGenericJob</a>(<var>job</var>, <var>realm</var>)
  abstract operation to perform generic jobs in a particular realm (e.g., resolve promises resulting
  from <code id=hostenqueuegenericjob:atomics.waitasync><a data-x-internal=atomics.waitasync href=https://tc39.es/ecma262/#sec-atomics.waitasync>Atomics.waitAsync</a></code>). User agents must use the following implementation:
  <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>global</var> be <var>realm</var>'s <a href=#concept-realm-global id=hostenqueuegenericjob:concept-realm-global>global
   object</a>.<li><p><a href=#queue-a-global-task id=hostenqueuegenericjob:queue-a-global-task>Queue a global task</a> on the <a href=#javascript-engine-task-source id=hostenqueuegenericjob:javascript-engine-task-source>JavaScript engine task source</a> given
   <var>global</var> to perform <var>job</var>().</ol>

  <span id=integration-with-the-javascript-job-queue></span>
  <span id=enqueuejob(queuename,-job,-arguments)></span>
  <h6 id=hostenqueuepromisejob><span class=secno>8.1.6.6.4</span> <dfn>HostEnqueuePromiseJob</dfn>(<var>job</var>,
  <var>realm</var>)<a href=#hostenqueuepromisejob class=self-link></a></h6>

  <p>JavaScript contains an <a id=hostenqueuepromisejob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostenqueuepromisejob id=hostenqueuepromisejob:js-hostenqueuepromisejob data-x-internal=js-hostenqueuepromisejob>HostEnqueuePromiseJob</a>(<var>job</var>, <var>realm</var>)
  abstract operation to schedule Promise-related operations. HTML schedules these operations in the
  microtask queue. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li>
    <p>If <var>realm</var> is not null, then let <var>job settings</var> be the <a href=#concept-realm-settings-object id=hostenqueuepromisejob:concept-realm-settings-object>settings object</a> for <var>realm</var>. Otherwise,
    let <var>job settings</var> be null.</p>

     <div class=note>
      <p>If <var>realm</var> is not null, it is the <a id=hostenqueuepromisejob:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> of the author code that will
      run. When <var>job</var> is returned by <a id=hostenqueuepromisejob:newpromisereactionjob href=https://tc39.es/ecma262/#sec-newpromisereactionjob data-x-internal=newpromisereactionjob>NewPromiseReactionJob</a>, it is the realm of
      the promise's handler function. When <var>job</var> is returned by
      <a id=hostenqueuepromisejob:newpromiseresolvethenablejob href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob data-x-internal=newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a>, it is the realm of the <code>then</code>
      function.

      <p>If <var>realm</var> is null, either no author code will run or author code is guaranteed to
      throw. For the former, the author may not have passed in code to run, such as in <code>promise.then(null, null)</code>. For the latter, it is because a revoked Proxy was
      passed. In both cases, all the steps below that would otherwise use <var>job settings</var>
      get skipped.</p>

      <p class=XXX><a href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a>
      and <a href=https://tc39.es/ecma262/#sec-newpromisereactionjob>NewPromiseReactionJob</a>
      both seem to provide non-null realms (the current Realm Record) in the case of a revoked
      proxy. The previous text could be updated to reflect that.</p>
     </div>
   <li>
    <p><a href=#queue-a-microtask id=hostenqueuepromisejob:queue-a-microtask>Queue a microtask</a> to perform the following steps:</p>

    <ol><li><p>If <var>job settings</var> is not null, then <a href=#check-if-we-can-run-script id=hostenqueuepromisejob:check-if-we-can-run-script>check if we can run script</a>
     with <var>job settings</var>. If this returns "do not run" then return.<li>
      <p>If <var>job settings</var> is not null, then <a href=#prepare-to-run-script id=hostenqueuepromisejob:prepare-to-run-script>prepare to run script</a> with
      <var>job settings</var>.</p>

      <p class=note>This affects the <a href=#concept-entry-everything id=hostenqueuepromisejob:concept-entry-everything>entry</a> concept
      while the job runs.</p>
     <li>
      <p>Let <var>result</var> be <var>job</var>().</p>

      <p class=note><var>job</var> is an <a id=hostenqueuepromisejob:abstract-closure href=https://tc39.es/ecma262/#sec-abstract-closure data-x-internal=abstract-closure>abstract closure</a> returned by
      <a id=hostenqueuepromisejob:newpromisereactionjob-2 href=https://tc39.es/ecma262/#sec-newpromisereactionjob data-x-internal=newpromisereactionjob>NewPromiseReactionJob</a> or <a id=hostenqueuepromisejob:newpromiseresolvethenablejob-2 href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob data-x-internal=newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a>. The promise's
      handler function when <var>job</var> is returned by <a id=hostenqueuepromisejob:newpromisereactionjob-3 href=https://tc39.es/ecma262/#sec-newpromisereactionjob data-x-internal=newpromisereactionjob>NewPromiseReactionJob</a>, and
      the <code>then</code> function when <var>job</var> is returned by
      <a id=hostenqueuepromisejob:newpromiseresolvethenablejob-3 href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob data-x-internal=newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a>, are wrapped in <a href=https://tc39.es/ecma262/#sec-jobcallback-records id=hostenqueuepromisejob:jobcallback-record data-x-internal=jobcallback-record>JobCallback Records</a>. HTML saves the <a href=#incumbent-settings-object id=hostenqueuepromisejob:incumbent-settings-object>incumbent settings object</a> and
      a <a id=hostenqueuepromisejob:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> for to the <a href=#active-script id=hostenqueuepromisejob:active-script>active script</a> in
      <a href=#hostmakejobcallback id=hostenqueuepromisejob:hostmakejobcallback>HostMakeJobCallback</a> and restores them in <a href=#hostcalljobcallback id=hostenqueuepromisejob:hostcalljobcallback>HostCallJobCallback</a>.</p>
     <li><p>If <var>job settings</var> is not null, then <a href=#clean-up-after-running-script id=hostenqueuepromisejob:clean-up-after-running-script>clean up after running script</a>
     with <var>job settings</var>.<li>
      <p>If <var>result</var> is an <a href=https://tc39.es/ecma262/#sec-completion-record-specification-type id=hostenqueuepromisejob:completion-record data-x-internal=completion-record>abrupt completion</a>, then
      <a href=#report-an-exception id=hostenqueuepromisejob:report-an-exception>report an exception</a> given by <var>result</var>.[[Value]] for <var>realm</var>'s
      <a href=#concept-realm-global id=hostenqueuepromisejob:concept-realm-global>global object</a>.</p>

      <p class=XXX>There is a very gnarly case where HostEnqueuePromiseJob is called with a null
      realm (e.g., because Promise.prototype.then was called with null handlers) but also the job
      returns abruptly (because the promise capability's resolve or reject handler threw, possibly
      because this is a subclass of Promise that takes the supplied functions and wraps them in
      throwing functions before passing them on to the function passed to the Promise superclass
      constructor. Which global is to be used then, considering that the current realm could be
      different at each of those steps, by using a Promise constructor or Promise.prototype.then
      from another realm? See <a href=https://github.com/whatwg/html/issues/10526>issue
      #10526</a>.</p>
     </ol>
   </ol>

  <h6 id=hostenqueuetimeoutjob><span class=secno>8.1.6.6.5</span> <dfn>HostEnqueueTimeoutJob</dfn>(<var>job</var>, <var>realm</var>,
  <var>milliseconds</var>)<a href=#hostenqueuetimeoutjob class=self-link></a></h6>

  <p>JavaScript contains an <a id=hostenqueuetimeoutjob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostenqueuetimeoutjob id=hostenqueuetimeoutjob:js-hostenqueuetimeoutjob data-x-internal=js-hostenqueuetimeoutjob>HostEnqueueTimeoutJob</a>(<var>job</var>,
  <var>milliseconds</var>) abstract operation to schedule an operation to be performed after a
  timeout. HTML schedules these operations using <a id=hostenqueuetimeoutjob:run-steps-after-a-timeout href=timers-and-user-prompts.html#run-steps-after-a-timeout>run steps after a timeout</a>. User agents
  must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>global</var> be <var>realm</var>'s <a href=#concept-realm-global id=hostenqueuetimeoutjob:concept-realm-global>global
   object</a>.<li><p>Let <var>timeoutStep</var> be an algorithm step which <a href=#queue-a-global-task id=hostenqueuetimeoutjob:queue-a-global-task>queues a global task</a> on the <a href=#javascript-engine-task-source id=hostenqueuetimeoutjob:javascript-engine-task-source>JavaScript engine task source</a> given
   <var>global</var> to perform <var>job</var>().<li><p><a id=hostenqueuetimeoutjob:run-steps-after-a-timeout-2 href=timers-and-user-prompts.html#run-steps-after-a-timeout>Run steps after a timeout</a> given <var>global</var>, "<code>JavaScript</code>", <var>milliseconds</var>, and <var>timeoutStep</var>.</ol>

  <h6 id=hostmakejobcallback><span class=secno>8.1.6.6.6</span> <dfn>HostMakeJobCallback</dfn>(<var>callable</var>)<a href=#hostmakejobcallback class=self-link></a></h6>

  <p>JavaScript contains an <a id=hostmakejobcallback:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostmakejobcallback id=hostmakejobcallback:js-hostmakejobcallback data-x-internal=js-hostmakejobcallback>HostMakeJobCallback</a>(<var>callable</var>) abstract operation
  to let hosts attach state to JavaScript callbacks that are called from inside <a href=#concept-task id=hostmakejobcallback:concept-task>task</a>s. User agents must use the following implementation:
  <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>incumbent settings</var> be the <a href=#incumbent-settings-object id=hostmakejobcallback:incumbent-settings-object>incumbent settings object</a>.<li><p>Let <var>active script</var> be the <a href=#active-script id=hostmakejobcallback:active-script>active script</a>.<li><p>Let <var>script execution context</var> be null.<li>
    <p>If <var>active script</var> is not null, set <var>script execution context</var> to a new
    <a id=hostmakejobcallback:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a>, with its Function field set to null, its Realm field
    set to <var>active script</var>'s <a href=#settings-object id=hostmakejobcallback:settings-object>settings
    object</a>'s <a href="#environment-settings-object's-realm" id="hostmakejobcallback:environment-settings-object's-realm">realm</a>, and its
    ScriptOrModule set to <var>active script</var>'s
    <a href=#concept-script-record id=hostmakejobcallback:concept-script-record>record</a>.</p>

    <p class=note>As seen below, this is used in order to propagate the current <a href=#active-script id=hostmakejobcallback:active-script-2>active
    script</a> forward to the time when the job callback is invoked.</p>

    <div class=example>
     <p>A case where <var>active script</var> is non-null, and saving it in this way is useful, is
     the following:</p>

     <pre><code class='js'>Promise<c- p>.</c->resolve<c- p>(</c-><c- t>&apos;import(`./example.mjs`)&apos;</c-><c- p>).</c->then<c- p>(</c->eval<c- p>);</c-></code></pre>

     <p>Without this step (and the steps that use it in <a href=#hostcalljobcallback id=hostmakejobcallback:hostcalljobcallback>HostCallJobCallback</a>), there
     would be no <a href=#active-script id=hostmakejobcallback:active-script-3>active script</a> when the <code id=hostmakejobcallback:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expression is evaluated,
     since <code id=hostmakejobcallback:eval()><a data-x-internal=eval() href=https://tc39.es/ecma262/#sec-eval-x>eval()</a></code> is a built-in function that does not originate from any particular
     <a href=#concept-script id=hostmakejobcallback:concept-script>script</a>.</p>

     <p>With this step in place, the active script is propagated from the above code into the job,
     allowing <code id=hostmakejobcallback:import()-2><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> to use the original script's <a href=#concept-script-base-url id=hostmakejobcallback:concept-script-base-url>base URL</a> appropriately.</p>
    </div>

    <div class=example>
     <p><var>active script</var> can be null if the user clicks on the following button:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;Promise.resolve(&apos;import(`./example.mjs`)&apos;).then(eval)&quot;</c-><c- p>&gt;</c->Click me<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>

     <p>In this case, the JavaScript function for the <a href=#event-handlers id=hostmakejobcallback:event-handlers>event
     handler</a> will be created by the <a href=#getting-the-current-value-of-the-event-handler id=hostmakejobcallback:getting-the-current-value-of-the-event-handler>get the current value of the event handler</a> algorithm, which creates a function
     with null [[ScriptOrModule]] value. Thus, when the promise machinery calls
     <a href=#hostmakejobcallback id=hostmakejobcallback:hostmakejobcallback>HostMakeJobCallback</a>, there will be no <a href=#active-script id=hostmakejobcallback:active-script-4>active script</a> to pass
     along.</p>

     <p>As a consequence, this means that when the <code id=hostmakejobcallback:import()-3><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expression is evaluated,
     there will still be no <a href=#active-script id=hostmakejobcallback:active-script-5>active script</a>. Fortunately that is handled by our
     implementation of <a href=#hostloadimportedmodule id=hostmakejobcallback:hostloadimportedmodule>HostLoadImportedModule</a> by falling back to using the
     <a href=#current-settings-object id=hostmakejobcallback:current-settings-object>current settings object</a>'s <a href=#api-base-url id=hostmakejobcallback:api-base-url>API base URL</a>.</p>
    </div>
   <li><p>Return the <a id=hostmakejobcallback:jobcallback-record href=https://tc39.es/ecma262/#sec-jobcallback-records data-x-internal=jobcallback-record>JobCallback Record</a> { [[Callback]]: <var>callable</var>,
   [[HostDefined]]: { [[IncumbentSettings]]: <var>incumbent settings</var>, [[ActiveScriptContext]]:
   <var>script execution context</var> } }.</ol>

  


  <h5 id=integration-with-the-javascript-module-system><span class=secno>8.1.6.7</span> Module-related host hooks<a href=#integration-with-the-javascript-module-system class=self-link></a></h5>

  <p>The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts
  of their processing model. This specification defines the rest of their processing model: how the
  module system is bootstrapped, via the <code id=integration-with-the-javascript-module-system:the-script-element><a href=scripting.html#the-script-element>script</a></code> element with <code id=integration-with-the-javascript-module-system:attr-script-type><a href=scripting.html#attr-script-type>type</a></code> attribute set to "<code>module</code>", and how
  modules are fetched, resolved, and executed. <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <p class=note>Although the JavaScript specification speaks in terms of "scripts" versus
  "modules", in general this specification speaks in terms of <a href=#classic-script id=integration-with-the-javascript-module-system:classic-script>classic
  scripts</a> versus <a href=#module-script id=integration-with-the-javascript-module-system:module-script>module scripts</a>, since both of them use
  the <code id=integration-with-the-javascript-module-system:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> element.</p>

  <dl class=domintro><dt><code><var>modulePromise</var> = <a href=https://tc39.es/ecma262/#sec-import-calls id=integration-with-the-javascript-module-system:import() data-x-internal=import()>import(<var>specifier</var>)</a></code><dd>
    <p>Returns a promise for the module namespace object for the <a href=#module-script id=integration-with-the-javascript-module-system:module-script-2>module script</a>
    identified by <var>specifier</var>. This allows dynamic importing of module scripts at runtime,
    instead of statically using the <code>import</code> statement form. The specifier will
    be <a href=#resolve-a-module-specifier id=integration-with-the-javascript-module-system:resolve-a-module-specifier>resolved</a> relative to the <a href=#active-script id=integration-with-the-javascript-module-system:active-script>active
    script</a>.</p>

    <p>The returned promise will be rejected if an invalid specifier is given, or if a failure is
    encountered while <a href=#hostloadimportedmodule id=integration-with-the-javascript-module-system:hostloadimportedmodule>fetching</a> or evaluating the
    resulting module graph.</p>

    <p>This syntax can be used inside both <a href=#classic-script id=integration-with-the-javascript-module-system:classic-script-2>classic</a> and <a href=#module-script id=integration-with-the-javascript-module-system:module-script-3>module scripts</a>. It thus provides a bridge into the module-script
    world, from the classic-script world.</p>
   <dt><code><var>url</var> = <a href=https://tc39.es/ecma262/#sec-meta-properties id=integration-with-the-javascript-module-system:import.meta data-x-internal=import.meta>import.meta</a>.<a href=#import-meta-url id=integration-with-the-javascript-module-system:import-meta-url>url</a></code><dd>
    <p>Returns the <a href=#active-script id=integration-with-the-javascript-module-system:active-script-2>active module script</a>'s <a href=#concept-script-base-url id=integration-with-the-javascript-module-system:concept-script-base-url>base URL</a>.</p>

    <p>This syntax can only be used inside <a href=#module-script id=integration-with-the-javascript-module-system:module-script-4>module scripts</a>.</p>
   <dt><code><var>url</var> = <a href=https://tc39.es/ecma262/#sec-meta-properties id=integration-with-the-javascript-module-system:import.meta-2 data-x-internal=import.meta>import.meta</a>.<a href=#import-meta-resolve id=integration-with-the-javascript-module-system:import-meta-resolve>resolve</a>(<var>specifier</var>)</code><dd>
    <p>Returns <var>specifier</var>, <a href=#resolve-a-module-specifier id=integration-with-the-javascript-module-system:resolve-a-module-specifier-2>resolved</a>
    relative to the <a href=#active-script id=integration-with-the-javascript-module-system:active-script-3>active script</a>. That is, this returns the URL that would be imported
    by using <code id=integration-with-the-javascript-module-system:import()-2><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import(<var>specifier</var>)</a></code>.</p>

    <p>Throws a <code id=integration-with-the-javascript-module-system:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> exception if an invalid specifier is given.</p>

    <p>This syntax can only be used inside <a href=#module-script id=integration-with-the-javascript-module-system:module-script-5>module scripts</a>.</p>
   </dl>

  <p>A <dfn id=module-map>module map</dfn> is a <a href=https://infra.spec.whatwg.org/#ordered-map id=integration-with-the-javascript-module-system:ordered-map data-x-internal=ordered-map>map</a> keyed by <a href=https://infra.spec.whatwg.org/#tuple id=integration-with-the-javascript-module-system:tuple data-x-internal=tuple>tuples</a> consisting of a <a id=integration-with-the-javascript-module-system:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> and a <a id=integration-with-the-javascript-module-system:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>.
  The <a id=integration-with-the-javascript-module-system:url-record-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> is the <a href=https://fetch.spec.whatwg.org/#concept-request-url id=integration-with-the-javascript-module-system:concept-request-url data-x-internal=concept-request-url>request URL</a> at which
  the module was fetched, and the <a id=integration-with-the-javascript-module-system:string-2 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> indicates the type of the module (e.g. "<code>javascript-or-wasm</code>"). The <a href=#module-map id=integration-with-the-javascript-module-system:module-map>module map</a>'s values are either a
  <a href=#module-script id=integration-with-the-javascript-module-system:module-script-6>module script</a>, null (used to represent failed fetches), or a placeholder value "<code>fetching</code>". <a href=#module-map id=integration-with-the-javascript-module-system:module-map-2>Module maps</a> are used to ensure
  that imported module scripts are only fetched, parsed, and evaluated once per
  <code id=integration-with-the-javascript-module-system:document><a href=dom.html#document>Document</a></code> or <a href=workers.html#workers>worker</a>.</p>

  <div class=example>
   <p>Since <a href=#module-map id=integration-with-the-javascript-module-system:module-map-3>module maps</a> are keyed by (URL, module type), the
   following code will create three separate entries in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-4>module map</a>, since it
   results in three different (URL, module type) <a href=https://infra.spec.whatwg.org/#tuple id=integration-with-the-javascript-module-system:tuple-2 data-x-internal=tuple>tuples</a> (all with "<code>javascript-or-wasm</code>" type):</p>

   <pre><code class='js'><c- k>import</c-> <c- u>&quot;https://example.com/module.mjs&quot;</c-><c- p>;</c->
<c- k>import</c-> <c- u>&quot;https://example.com/module.mjs#map-buster&quot;</c-><c- p>;</c->
<c- k>import</c-> <c- u>&quot;https://example.com/module.mjs?debug=true&quot;</c-><c- p>;</c-></code></pre>

   <p>That is, URL <a href=https://url.spec.whatwg.org/#concept-url-query id=integration-with-the-javascript-module-system:concept-url-query data-x-internal=concept-url-query>queries</a> and <a href=https://url.spec.whatwg.org/#concept-url-fragment id=integration-with-the-javascript-module-system:concept-url-fragment data-x-internal=concept-url-fragment>fragments</a> can be varied to create distinct entries in the
   <a href=#module-map id=integration-with-the-javascript-module-system:module-map-5>module map</a>; they are not ignored. Thus, three separate fetches and three separate
   module evaluations will be performed.</p>

   <p>In contrast, the following code would only create a single entry in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-6>module
   map</a>, since after applying the <a id=integration-with-the-javascript-module-system:url-parser href=https://url.spec.whatwg.org/#concept-url-parser data-x-internal=url-parser>URL parser</a> to these inputs, the resulting <a href=https://url.spec.whatwg.org/#concept-url id=integration-with-the-javascript-module-system:url-record-3 data-x-internal=url-record>URL records</a> are equal:</p>

   <pre><code class='js'><c- k>import</c-> <c- u>&quot;https://example.com/module2.mjs&quot;</c-><c- p>;</c->
<c- k>import</c-> <c- u>&quot;https:example.com/module2.mjs&quot;</c-><c- p>;</c->
<c- k>import</c-> <c- u>&quot;https://///example.com\\module2.mjs&quot;</c-><c- p>;</c->
<c- k>import</c-> <c- u>&quot;https://example.com/foo/../module2.mjs&quot;</c-><c- p>;</c-></code></pre>

   <p>So in this second example, only one fetch and one module evaluation will occur.</p>

   <p>Note that this behavior is the same as how <a href=workers.html#sharedworker id=integration-with-the-javascript-module-system:sharedworker>shared workers</a> are keyed by their parsed <a href=workers.html#concept-sharedworkerglobalscope-constructor-url id=integration-with-the-javascript-module-system:concept-sharedworkerglobalscope-constructor-url>constructor URL</a>.</p>
  </div>

  <div class=example>
   <p>Since module type is also part of the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-7>module map</a> key, the following code will
   create two separate entries in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-8>module map</a> (the type is "<code>javascript-or-wasm</code>" for the first, and "<code>css</code>" for the
   second):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>module</c-><c- p>&gt;</c->
  <c- k>import</c-> <c- u>&quot;https://example.com/module&quot;</c-><c- p>;</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>module</c-><c- p>&gt;</c->
  <c- k>import</c-> <c- u>&quot;https://example.com/module&quot;</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>&quot;css&quot;</c-> <c- p>};</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>This can result in two separate fetches and two separate module evaluations being performed.</p>

   <p class=XXX>In practice, due to the as-yet-unspecified memory cache (see issue <a href=https://github.com/whatwg/html/issues/6110>#6110</a>) the resource may only be fetched
   once in WebKit and Blink-based browsers. Additionally, as long as all module types are mutually
   exclusive, the module type check in <a href=#fetch-a-single-module-script id=integration-with-the-javascript-module-system:fetch-a-single-module-script>fetch a single module script</a> will fail for at
   least one of the imports, so at most one module evaluation will occur.</p>

   <p>The purpose of including the type in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-9>module map</a> key is so that an import
   with the wrong type attribute does not prevent a different import of the same specifier but with
   the correct type from succeeding.</p>
  </div>

  <div class=example>
   <p>JavaScript module scripts are the default import type when importing from another JavaScript
    module; that is, when an <code>import</code> statement lacks a <code>type</code> import attribute the imported module script's type will be JavaScript.
    Attempting to import a JavaScript resource using an <code>import</code> statement with
    a <code>type</code> import attribute will fail:</p>

    <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-><c- p>&gt;</c->
    <c- c1>// All of the following will fail, assuming that the imported .mjs files are served with a</c->
    <c- c1>// JavaScript MIME type. JavaScript module scripts are the default and cannot be imported with</c->
    <c- c1>// any import type attribute.</c->
    <c- k>import</c-> foo <c- k>from</c-> <c- u>&quot;./foo.mjs&quot;</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>&quot;javascript&quot;</c-> <c- p>};</c->
    <c- k>import</c-> foo2 <c- k>from</c-> <c- u>&quot;./foo2.mjs&quot;</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>&quot;js&quot;</c-> <c- p>};</c->
    <c- k>import</c-> foo3 <c- k>from</c-> <c- u>&quot;./foo3.mjs&quot;</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>&quot;&quot;</c-> <c- p>};</c->
    <c- k>await</c-> <c- k>import</c-><c- p>(</c-><c- u>&quot;./foo4.mjs&quot;</c-><c- p>,</c-> <c- p>{</c-> <c- a>with</c-><c- o>:</c-> <c- p>{</c-> type<c- o>:</c-> <c- kc>null</c-> <c- p>}</c-> <c- p>});</c->
    <c- k>await</c-> <c- k>import</c-><c- p>(</c-><c- u>&quot;./foo5.mjs&quot;</c-><c- p>,</c-> <c- p>{</c-> <c- a>with</c-><c- o>:</c-> <c- p>{</c-> type<c- o>:</c-> <c- kc>undefined</c-> <c- p>}</c-> <c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>

  


  <h6 id=hostgetimportmetaproperties><span class=secno>8.1.6.7.1</span> <dfn>HostGetImportMetaProperties</dfn>(<var>moduleRecord</var>)<a href=#hostgetimportmetaproperties class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve title="import.meta.resolve() is a built-in function defined on the import.meta object of a JavaScript module that resolves a module specifier to a URL using the current module's URL as base.">Reference/Operators/import.meta/resolve</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>106+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>105+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>105+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta title="The import.meta meta-property exposes context-specific metadata to a JavaScript module. It contains information about the module, such as the module's URL.">Reference/Operators/import.meta</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>62+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>64+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>12+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>JavaScript contains an <a id=hostgetimportmetaproperties:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostgetimportmetaproperties id=hostgetimportmetaproperties:js-hostgetimportmetaproperties data-x-internal=js-hostgetimportmetaproperties>HostGetImportMetaProperties</a> abstract operation.
  User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>moduleScript</var> be <var>moduleRecord</var>.[[HostDefined]].<li><p><a id=hostgetimportmetaproperties:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>moduleScript</var>'s <a href=#concept-script-base-url id=hostgetimportmetaproperties:concept-script-base-url>base
   URL</a> is not null, as <var>moduleScript</var> is a <a href=#javascript-module-script id=hostgetimportmetaproperties:javascript-module-script>JavaScript module
   script</a>.<li><p>Let <var>urlString</var> be <var>moduleScript</var>'s <a href=#concept-script-base-url id=hostgetimportmetaproperties:concept-script-base-url-2>base URL</a>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=hostgetimportmetaproperties:concept-url-serializer data-x-internal=concept-url-serializer>serialized</a>.<li>
    <p>Let <var>steps</var> be the following steps, given the argument <var>specifier</var>:</p>

    <ol><li><p>Set <var>specifier</var> to ? <a id=hostgetimportmetaproperties:tostring href=https://tc39.es/ecma262/#sec-tostring data-x-internal=tostring>ToString</a>(<var>specifier</var>).<li><p>Let <var>url</var> be the result of <a href=#resolve-a-module-specifier id=hostgetimportmetaproperties:resolve-a-module-specifier>resolving
     a module specifier</a> given <var>moduleScript</var> and <var>specifier</var>.<li><p>Return the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=hostgetimportmetaproperties:concept-url-serializer-2 data-x-internal=concept-url-serializer>serialization</a> of
     <var>url</var>.</ol>
   <li><p>Let <var>resolveFunction</var> be ! <a id=hostgetimportmetaproperties:createbuiltinfunction href=https://tc39.es/ecma262/#sec-createbuiltinfunction data-x-internal=createbuiltinfunction>CreateBuiltinFunction</a>(<var>steps</var>,
   1, "<code>resolve</code>", « »).<li><p>Return « <a id=hostgetimportmetaproperties:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> { [[Key]]: "<dfn id=import-meta-url><code>url</code></dfn>", [[Value]]: <var>urlString</var> },
   <a id=hostgetimportmetaproperties:record-2 href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> { [[Key]]: "<dfn id=import-meta-resolve><code>resolve</code></dfn>",
   [[Value]]: <var>resolveFunction</var> } ».</ol>

  <h6 id=hostgetsupportedimportattributes><span class=secno>8.1.6.7.2</span> <span id=hostgetsupportedimportassertions></span><dfn>HostGetSupportedImportAttributes</dfn>()<a href=#hostgetsupportedimportattributes class=self-link></a></h6>

  <p>JavaScript contains an <a id=hostgetsupportedimportattributes:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostgetsupportedimportattributes id=hostgetsupportedimportattributes:js-hostgetsupportedimportattributes data-x-internal=js-hostgetsupportedimportattributes>HostGetSupportedImportAttributes</a> abstract
  operation. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Return « "<code>type</code>" ».</ol>

  <h6 id=hostloadimportedmodule><span class=secno>8.1.6.7.3</span> <dfn>HostLoadImportedModule</dfn>(<var>referrer</var>,
  <var>moduleRequest</var>, <var>loadState</var>, <var>payload</var>)<a href=#hostloadimportedmodule class=self-link></a></h6>

  <p>JavaScript contains an <a id=hostloadimportedmodule:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-HostLoadImportedModule id=hostloadimportedmodule:js-hostloadimportedmodule data-x-internal=js-hostloadimportedmodule>HostLoadImportedModule</a> abstract operation. User agents
  must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <ol><li><p>Let <var>settingsObject</var> be the <a href=#current-settings-object id=hostloadimportedmodule:current-settings-object>current settings object</a>.<li>
    <p>If <var>settingsObject</var>'s <a href=#concept-settings-object-global id=hostloadimportedmodule:concept-settings-object-global>global
    object</a> implements <code id=hostloadimportedmodule:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code> or <code id=hostloadimportedmodule:serviceworkerglobalscope><a data-x-internal=serviceworkerglobalscope href=https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope>ServiceWorkerGlobalScope</a></code>
    and <var>loadState</var> is undefined, then:</p>

    <p class=note><var>loadState</var> is undefined when the current fetching process has been
    initiated by a dynamic <code id=hostloadimportedmodule:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> call, either directly or when loading the
    transitive dependencies of the dynamically imported module.</p>

    <ol><li><p>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>,
     <var>moduleRequest</var>, <var>payload</var>, <a id=hostloadimportedmodule:throwcompletion href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(a new
     <code id=hostloadimportedmodule:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>)).<li><p>Return.</ol>
   <li><p>Let <var>referencingScript</var> be null.<li><p>Let <var>originalFetchOptions</var> be the <a href=#default-script-fetch-options id=hostloadimportedmodule:default-script-fetch-options>default script fetch
   options</a>.<li><p>Let <var>fetchReferrer</var> be "<code>client</code>".<li>
    <p>If <var>referrer</var> is a <a id=hostloadimportedmodule:script-record href=https://tc39.es/ecma262/#sec-script-records data-x-internal=script-record>Script Record</a> or a <a id=hostloadimportedmodule:cyclic-module-record href=https://tc39.es/ecma262/#sec-cyclic-module-records data-x-internal=cyclic-module-record>Cyclic Module
    Record</a>, then:</p>

    <ol><li><p>Set <var>referencingScript</var> to <var>referrer</var>.[[HostDefined]].</p>

     <li><p>Set <var>settingsObject</var> to <var>referencingScript</var>'s <a href=#settings-object id=hostloadimportedmodule:settings-object>settings object</a>.<li><p>Set <var>fetchReferrer</var> to <var>referencingScript</var>'s <a href=#concept-script-base-url id=hostloadimportedmodule:concept-script-base-url>base URL</a>.<li><p>Set <var>originalFetchOptions</var> to <var>referencingScript</var>'s <a href=#concept-script-script-fetch-options id=hostloadimportedmodule:concept-script-script-fetch-options>fetch options</a>.</ol>

    <div class=example>
     <p><var>referrer</var> is usually a <a id=hostloadimportedmodule:script-record-2 href=https://tc39.es/ecma262/#sec-script-records data-x-internal=script-record>Script Record</a> or a <a id=hostloadimportedmodule:cyclic-module-record-2 href=https://tc39.es/ecma262/#sec-cyclic-module-records data-x-internal=cyclic-module-record>Cyclic Module
     Record</a>, but it will not be so for event handlers per the <a href=#getting-the-current-value-of-the-event-handler id=hostloadimportedmodule:getting-the-current-value-of-the-event-handler>get the current value of the event handler</a>
     algorithm. For example, given:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;import(&apos;./foo.mjs&apos;)&quot;</c-><c- p>&gt;</c->Click me<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>

     <p>If a <code id=hostloadimportedmodule:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event occurs, then at the time the
     <code id=hostloadimportedmodule:import()-2><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expression runs, <a id=hostloadimportedmodule:getactivescriptormodule href=https://tc39.es/ecma262/#sec-getactivescriptormodule data-x-internal=getactivescriptormodule>GetActiveScriptOrModule</a> will return null,
     and this operation will receive the <a id=hostloadimportedmodule:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a> as a fallback
     <var>referrer</var>.</p>
    </div>
   <li>
    <p>If <var>referrer</var> is a <a id=hostloadimportedmodule:cyclic-module-record-3 href=https://tc39.es/ecma262/#sec-cyclic-module-records data-x-internal=cyclic-module-record>Cyclic Module Record</a> and <var>moduleRequest</var>
    is equal to the first element of <var>referrer</var>.[[RequestedModules]], then:</p>

    <ol><li id=validate-requested-module-specifiers>
      <p><a href=https://infra.spec.whatwg.org/#list-iterate id=hostloadimportedmodule:list-iterate data-x-internal=list-iterate>For each</a> <a id=hostloadimportedmodule:modulerequest-record href=https://tc39.es/ecma262/#modulerequest-record data-x-internal=modulerequest-record>ModuleRequest record</a>
      <var>requested</var> of <var>referrer</var>.[[RequestedModules]]:</p>

      <ol><li>
        <p>If <var>moduleRequest</var>.[[Attributes]] contains a <a id=hostloadimportedmodule:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> <var>entry</var>
        such that <var>entry</var>.[[Key]] is not "<code>type</code>", then:</p>

        <ol><li><p>Let <var>error</var> be a new <code id=hostloadimportedmodule:syntaxerror-2><a data-x-internal=syntaxerror-2 href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-syntaxerror>SyntaxError</a></code> exception.<li><p>If <var>loadState</var> is not undefined and <var>loadState</var>.[[ErrorToRethrow]]
         is null, set <var>loadState</var>.[[ErrorToRethrow]] to <var>error</var>.<li><p>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-2 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>,
         <var>moduleRequest</var>, <var>payload</var>,
         <a id=hostloadimportedmodule:throwcompletion-2 href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(<var>error</var>)).<li><p>Return.</ol>

        <p class=note>The JavaScript specification re-performs this validation but it is duplicated
        here to avoid unnecessarily loading any of the dependencies on validation failure.</p>
       <li><p><a href=#resolve-a-module-specifier id=hostloadimportedmodule:resolve-a-module-specifier>Resolve a module specifier</a> given <var>referencingScript</var> and
       <var>moduleRequest</var>.[[Specifier]], catching any exceptions. If they throw an exception, let
       <var>resolutionError</var> be the thrown exception.<li>
        <p>If the previous step threw an exception, then:</p>

        <ol><li><p>If <var>loadState</var> is not undefined and <var>loadState</var>.[[ErrorToRethrow]]
         is null, set <var>loadState</var>.[[ErrorToRethrow]] to
         <var>resolutionError</var>.<li><p>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-3 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>,
         <var>moduleRequest</var>, <var>payload</var>,
         <a id=hostloadimportedmodule:throwcompletion-3 href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(<var>resolutionError</var>)).<li><p>Return.</ol>
       <li><p>Let <var>moduleType</var> be the result of running the <a href=#module-type-from-module-request id=hostloadimportedmodule:module-type-from-module-request>module type from module
       request</a> steps given <var>moduleRequest</var>.<li>
        <p>If the result of running the <a href=#module-type-allowed id=hostloadimportedmodule:module-type-allowed>module type allowed</a> steps given
        <var>moduleType</var> and <var>settingsObject</var> is false, then:</p>

        <ol><li><p>Let <var>error</var> be a new <code id=hostloadimportedmodule:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> exception.<li><p>If <var>loadState</var> is not undefined and <var>loadState</var>.[[ErrorToRethrow]]
         is null, set <var>loadState</var>.[[ErrorToRethrow]] to <var>error</var>.<li><p>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-4 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>,
         <var>moduleRequest</var>, <var>payload</var>,
         <a id=hostloadimportedmodule:throwcompletion-4 href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(<var>error</var>)).<li><p>Return.</ol>
       </ol>

      <p class=note>This step is essentially validating all of the requested module specifiers and
      type attributes when the first call to <a href=#hostloadimportedmodule id=hostloadimportedmodule:hostloadimportedmodule>HostLoadImportedModule</a> for a static module
      dependency list is made, to avoid further loading operations in the case any one of the
      dependencies has a static error. We treat a module with unresolvable module specifiers or
      unsupported type attributes the same as one that cannot be parsed; in both cases, a syntactic
      issue makes it impossible to ever contemplate linking the module later.</p>
     </ol>
   <li><p>Let <var>url</var> be the result of <a href=#resolve-a-module-specifier id=hostloadimportedmodule:resolve-a-module-specifier-2>resolving a
   module specifier</a> given <var>referencingScript</var> and
   <var>moduleRequest</var>.[[Specifier]], catching any exceptions. If they throw an exception, let
   <var>resolutionError</var> be the thrown exception.<li>
    <p>If the previous step threw an exception, then:</p>

    <ol><li><p>If <var>loadState</var> is not undefined and <var>loadState</var>.[[ErrorToRethrow]] is
     null, set <var>loadState</var>.[[ErrorToRethrow]] to <var>resolutionError</var>.<li><p>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-5 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>,
     <var>moduleRequest</var>, <var>payload</var>,
     <a id=hostloadimportedmodule:throwcompletion-5 href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(<var>resolutionError</var>)).<li><p>Return.</ol>
   <li><p>Let <var>fetchOptions</var> be the result of <a href=#get-the-descendant-script-fetch-options id=hostloadimportedmodule:get-the-descendant-script-fetch-options>getting the descendant script fetch options</a> given
   <var>originalFetchOptions</var>, <var>url</var>, and <var>settingsObject</var>.<li><p>Let <var>destination</var> be <code>"script"</code>.<li><p>Let <var>fetchClient</var> be <var>settingsObject</var>.<li>
    <p>If <var>loadState</var> is not undefined, then:</p>

    <ol><li><p>Set <var>destination</var> to <var>loadState</var>.[[Destination]].<li><p>Set <var>fetchClient</var> to <var>loadState</var>.[[FetchClient]].</ol>
   <li>
    <p><a href=#fetch-a-single-imported-module-script id=hostloadimportedmodule:fetch-a-single-imported-module-script>Fetch a single imported module script</a> given <var>url</var>,
    <var>fetchClient</var>, <var>destination</var>, <var>fetchOptions</var>,
    <var>settingsObject</var>, <var>fetchReferrer</var>, <var>moduleRequest</var>, and
    <var>onSingleFetchComplete</var> as defined below. If <var>loadState</var> is not undefined and
    <var>loadState</var>.[[PerformFetch]] is not null, pass <var>loadState</var>.[[PerformFetch]]
    along as well.</p>

    <p><var>onSingleFetchComplete</var> given <var>moduleScript</var> is the following
    algorithm:</p>

    <ol><li><p>Let <var>completion</var> be null.<li><p>If <var>moduleScript</var> is null, then set <var>completion</var> to
     <a id=hostloadimportedmodule:throwcompletion-6 href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(a new <code id=hostloadimportedmodule:typeerror-3><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>).<li>
      <p>Otherwise, if <var>moduleScript</var>'s <a href=#concept-script-parse-error id=hostloadimportedmodule:concept-script-parse-error>parse
      error</a> is not null, then:</p>

      <ol><li><p>Let <var>parseError</var> be <var>moduleScript</var>'s <a href=#concept-script-parse-error id=hostloadimportedmodule:concept-script-parse-error-2>parse error</a>.<li><p>Set <var>completion</var> to
       <a id=hostloadimportedmodule:throwcompletion-7 href=https://tc39.es/ecma262/#sec-throwcompletion data-x-internal=throwcompletion>ThrowCompletion</a>(<var>parseError</var>).<li><p>If <var>loadState</var> is not undefined and <var>loadState</var>.[[ErrorToRethrow]] is
       null, set <var>loadState</var>.[[ErrorToRethrow]] to <var>parseError</var>.</ol>
     <li><p>Otherwise, set <var>completion</var> to
     <a id=hostloadimportedmodule:normalcompletion href=https://tc39.es/ecma262/#sec-normalcompletion data-x-internal=normalcompletion>NormalCompletion</a>(<var>moduleScript</var>'s <a href=#concept-script-record id=hostloadimportedmodule:concept-script-record>record</a>).<li><p>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-6 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>,
     <var>moduleRequest</var>, <var>payload</var>, <var>completion</var>).</ol>
   </ol>

  

  <h4 id=event-loops><span class=secno>8.1.7</span> Event loops<a href=#event-loops class=self-link></a></h4>

  <h5 id=definitions-3><span class=secno>8.1.7.1</span> Definitions<a href=#definitions-3 class=self-link></a></h5>

  <p>To coordinate events, user interaction, scripts, rendering, networking, and so forth, user
  agents must use <dfn id=event-loop data-lt="event loop" data-export="">event loops</dfn> as
  described in this section. Each <a id=definitions-3:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> has an associated <dfn data-dfn-for=agent id=concept-agent-event-loop data-export="">event loop</dfn>, which is unique to that agent.</p>

  <p>The <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop>event loop</a> of a <a href=#similar-origin-window-agent id=definitions-3:similar-origin-window-agent>similar-origin window
  agent</a> is known as a <dfn id=window-event-loop>window event loop</dfn>. The <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop-2>event loop</a> of a <a href=#dedicated-worker-agent id=definitions-3:dedicated-worker-agent>dedicated worker agent</a>,
  <a href=#shared-worker-agent id=definitions-3:shared-worker-agent>shared worker agent</a>, or <a href=#service-worker-agent id=definitions-3:service-worker-agent>service worker agent</a> is known as a <dfn id=worker-event-loop-2>worker
  event loop</dfn>. And the <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop-3>event loop</a> of a
  <a href=#worklet-agent id=definitions-3:worklet-agent>worklet agent</a> is known as a <dfn id=worklet-event-loop>worklet event loop</dfn>.</p>

  <div class=note>
   <p><a href=#event-loop id=definitions-3:event-loop>Event loops</a> do not necessarily correspond to implementation
   threads. For example, multiple <a href=#window-event-loop id=definitions-3:window-event-loop>window event loops</a> could
   be cooperatively scheduled in a single thread.</p>

   <p>However, for the various worker <a href=https://tc39.es/ecma262/#sec-agents id=definitions-3:agent-2 data-x-internal=agent>agents</a> that are allocated with
   [[CanBlock]] set to true, the JavaScript specification does place requirements on them regarding
   <a id=definitions-3:forward-progress href=https://tc39.es/ecma262/#sec-forward-progress data-x-internal=forward-progress>forward progress</a>, which effectively amount to requiring dedicated per-agent threads
   in those cases.</p>
  </div>

  

  <hr>

  <p>An <a href=#event-loop id=definitions-3:event-loop-2>event loop</a> has one or more <dfn id=task-queue>task queues</dfn>. A
  <a href=#task-queue id=definitions-3:task-queue>task queue</a> is a <a id=definitions-3:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <a href=#concept-task id=definitions-3:concept-task>tasks</a>.</p>

  <p class=note><a href=#task-queue id=definitions-3:task-queue-2>Task queues</a> are <a href=https://infra.spec.whatwg.org/#ordered-set id=definitions-3:set-2 data-x-internal=set>sets</a>,
  not <a href=https://infra.spec.whatwg.org/#queue id=definitions-3:queue data-x-internal=queue>queues</a>, because the <a href=#event-loop-processing-model>event
  loop processing model</a> grabs the first <a href=#concept-task-runnable id=definitions-3:concept-task-runnable><em>runnable</em></a> <a href=#concept-task id=definitions-3:concept-task-2>task</a>
  from the chosen queue, instead of <a href=https://infra.spec.whatwg.org/#queue-dequeue id=definitions-3:dequeue data-x-internal=dequeue>dequeuing</a> the first task.</p>

  <p class=note>The <a href=#microtask-queue id=definitions-3:microtask-queue>microtask queue</a> is not a <a href=#task-queue id=definitions-3:task-queue-3>task queue</a>.</p>

  <p>Tasks encapsulate algorithms that are responsible for such work as:</p>

  <dl><dt>Events<dd>
    <p>Dispatching an <code id=definitions-3:event><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code> object at a particular
    <code id=definitions-3:eventtarget><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object is often done by a dedicated task.</p>

    <p class=note>Not all events are dispatched using the <a href=#task-queue id=definitions-3:task-queue-4>task queue</a>; many are
    dispatched during other tasks.</p>
   <dt>Parsing<dd><p>The <a id=definitions-3:html-parser href=parsing.html#html-parser>HTML parser</a> tokenizing one or more bytes, and then processing any
   resulting tokens, is typically a task.<dt>Callbacks<dd><p>Calling a callback is often done by a dedicated task.<dt>Using a resource<dd><p>When an algorithm <a href=https://fetch.spec.whatwg.org/#concept-fetch id=definitions-3:concept-fetch data-x-internal=concept-fetch>fetches</a> a resource, if the fetching
   occurs in a non-blocking fashion then the processing of the resource once some or all of the
   resource is available is performed by a task.<dt>Reacting to DOM manipulation<dd><p>Some elements have tasks that trigger in response to DOM manipulation, e.g. when that
   element is <a href=infrastructure.html#insert-an-element-into-a-document id=definitions-3:insert-an-element-into-a-document>inserted into the document</a>.</p>
  </dl>

  <p>Formally, a <dfn id=concept-task data-lt=task data-export="">task</dfn> is a
  <a id=definitions-3:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> which has:</p>

  <dl><dt><dfn id=concept-task-steps>Steps</dfn><dd>A series of steps specifying the work to be done by the task.<dt>A <dfn id=concept-task-source>source</dfn><dd>One of the <a href=#task-source id=definitions-3:task-source>task sources</a>, used to group and serialize
   related tasks.<dt>A <dfn id=concept-task-document>document</dfn><dd>A <code id=definitions-3:document><a href=dom.html#document>Document</a></code> associated with the task, or null for tasks that are not in a
   <a href=#window-event-loop id=definitions-3:window-event-loop-2>window event loop</a>.<dt>A <dfn id=script-evaluation-environment-settings-object-set data-export="">script evaluation environment settings object set</dfn><dd>A <a id=definitions-3:set-3 href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <a href=#environment-settings-object id=definitions-3:environment-settings-object>environment settings
   objects</a> used for tracking script evaluation during the task.</dl>

  <p>A <a href=#concept-task id=definitions-3:concept-task-3>task</a> is <dfn id=concept-task-runnable>runnable</dfn>
  if its <a href=#concept-task-document id=definitions-3:concept-task-document>document</a> is either null or <a id=definitions-3:fully-active href=document-sequences.html#fully-active>fully
  active</a>.</p>

  <p>Per its <a href=#concept-task-source id=definitions-3:concept-task-source>source</a> field, each <a href=#concept-task id=definitions-3:concept-task-4>task</a> is defined as coming from a specific <dfn id=task-source data-export="">task
  source</dfn>. For each <a href=#event-loop id=definitions-3:event-loop-3>event loop</a>, every <a href=#task-source id=definitions-3:task-source-2>task source</a> must be associated
  with a specific <a href=#task-queue id=definitions-3:task-queue-5>task queue</a>.</p>

  <p class=note>Essentially, <a href=#task-source id=definitions-3:task-source-3>task sources</a> are used within
  standards to separate logically-different types of tasks, which a user agent might wish to
  distinguish between. <a href=#task-queue id=definitions-3:task-queue-6>Task queues</a> are used by user agents to
  coalesce task sources within a given <a href=#event-loop id=definitions-3:event-loop-4>event loop</a>.</p>

  <p class=example>For example, a user agent could have one <a href=#task-queue id=definitions-3:task-queue-7>task queue</a> for mouse and
  key events (to which the <a href=#user-interaction-task-source id=definitions-3:user-interaction-task-source>user interaction task source</a> is associated), and another to
  which all other <a href=#task-source id=definitions-3:task-source-4>task sources</a> are associated. Then, using the
  freedom granted in the initial step of the <a href=#event-loop-processing-model>event loop
  processing model</a>, it could give keyboard and mouse events preference over other tasks
  three-quarters of the time, keeping the interface responsive but not starving other task queues.
  Note that in this setup, the processing model still enforces that the user agent would never
  process events from any one <a href=#task-source id=definitions-3:task-source-5>task source</a> out of order.</p>

  <hr>

  <p>Each <a href=#event-loop id=definitions-3:event-loop-5>event loop</a> has a <dfn id=currently-running-task>currently running task</dfn>, which is either a <a href=#concept-task id=definitions-3:concept-task-5>task</a> or null. Initially, this is null. It is used to handle
  reentrancy.</p>

  <p>Each <a href=#event-loop id=definitions-3:event-loop-6>event loop</a> has a <dfn id=microtask-queue>microtask queue</dfn>, which is a <a id=definitions-3:queue-2 href=https://infra.spec.whatwg.org/#queue data-x-internal=queue>queue</a> of
  <a href=#microtask id=definitions-3:microtask>microtasks</a>, initially empty. A <dfn id=microtask data-export="">microtask</dfn> is a
  colloquial way of referring to a <a href=#concept-task id=definitions-3:concept-task-6>task</a> that was created via the
  <a href=#queue-a-microtask id=definitions-3:queue-a-microtask>queue a microtask</a> algorithm.</p>

  <p>Each <a href=#event-loop id=definitions-3:event-loop-7>event loop</a> has a <dfn id=performing-a-microtask-checkpoint>performing a microtask checkpoint</dfn> boolean,
  which is initially false. It is used to prevent reentrant invocation of the <a href=#perform-a-microtask-checkpoint id=definitions-3:perform-a-microtask-checkpoint>perform a
  microtask checkpoint</a> algorithm.</p>

  <p>Each <a href=#window-event-loop id=definitions-3:window-event-loop-3>window event loop</a> has a <code id=definitions-3:domhighrestimestamp><a data-x-internal=domhighrestimestamp href=https://w3c.github.io/hr-time/#dom-domhighrestimestamp>DOMHighResTimeStamp</a></code>
  <dfn id=last-render-opportunity-time>last render opportunity time</dfn>, initially set to zero.</p>

  <p>Each <a href=#window-event-loop id=definitions-3:window-event-loop-4>window event loop</a> has a <code id=definitions-3:domhighrestimestamp-2><a data-x-internal=domhighrestimestamp href=https://w3c.github.io/hr-time/#dom-domhighrestimestamp>DOMHighResTimeStamp</a></code>
  <dfn id=last-idle-period-start-time>last idle period start time</dfn>, initially set to zero.</p>

  <p>To get the <dfn id=same-loop-windows>same-loop windows</dfn> for a <a href=#window-event-loop id=definitions-3:window-event-loop-5>window event loop</a> <var>loop</var>,
  return all <code id=definitions-3:window><a href=nav-history-apis.html#window>Window</a></code> objects whose <a href=#relevant-agent id=definitions-3:relevant-agent>relevant agent</a>'s
  <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop-4>event loop</a> is <var>loop</var>.</p>


  <h5 id=queuing-tasks><span class=secno>8.1.7.2</span> Queuing tasks<a href=#queuing-tasks class=self-link></a></h5>

  <p>To <dfn id=queue-a-task data-export="">queue a task</dfn> on a <a href=#task-source id=queuing-tasks:task-source>task source</a> <var>source</var>, which
  performs a series of steps <var>steps</var>, optionally given an event loop <var>event loop</var>
  and a document <var>document</var>:</p>

  <ol><li><p>If <var>event loop</var> was not given, set <var>event loop</var> to the <a href=#implied-event-loop id=queuing-tasks:implied-event-loop>implied
   event loop</a>.<li><p>If <var>document</var> was not given, set <var>document</var> to the <a href=#implied-document id=queuing-tasks:implied-document>implied
   document</a>.<li><p>Let <var>task</var> be a new <a href=#concept-task id=queuing-tasks:concept-task>task</a>.<li><p>Set <var>task</var>'s <a href=#concept-task-steps id=queuing-tasks:concept-task-steps>steps</a> to
   <var>steps</var>.<li><p>Set <var>task</var>'s <a href=#concept-task-source id=queuing-tasks:concept-task-source>source</a> to
   <var>source</var>.<li><p>Set <var>task</var>'s <a href=#concept-task-document id=queuing-tasks:concept-task-document>document</a> to the
   <var>document</var>.<li><p>Set <var>task</var>'s <a href=#script-evaluation-environment-settings-object-set id=queuing-tasks:script-evaluation-environment-settings-object-set>script evaluation environment settings object set</a> to an
   empty <a id=queuing-tasks:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a>.<li><p>Let <var>queue</var> be the <a href=#task-queue id=queuing-tasks:task-queue>task queue</a> to which <var>source</var> is
   associated on <var>event loop</var>.<li><p><a href=https://infra.spec.whatwg.org/#list-append id=queuing-tasks:list-append data-x-internal=list-append>Append</a> <var>task</var> to <var>queue</var>.</ol>

  <p class=warning>Failing to pass an event loop and document to <a href=#queue-a-task id=queuing-tasks:queue-a-task>queue a task</a> means
  relying on the ambiguous and poorly-specified <a href=#implied-event-loop id=queuing-tasks:implied-event-loop-2>implied event loop</a> and <a href=#implied-document id=queuing-tasks:implied-document-2>implied
  document</a> concepts. Specification authors should either always pass these values, or use the
  wrapper algorithms <a href=#queue-a-global-task id=queuing-tasks:queue-a-global-task>queue a global task</a> or <a href=#queue-an-element-task id=queuing-tasks:queue-an-element-task>queue an element task</a>
  instead. Using the wrapper algorithms is recommended.</p>

  <p>To <dfn id=queue-a-global-task data-export="">queue a global task</dfn> on a <a href=#task-source id=queuing-tasks:task-source-2>task source</a> <var>source</var>, with
  a <a href=#global-object id=queuing-tasks:global-object>global object</a> <var>global</var> and a series of steps <var>steps</var>:</p>

  <ol><li><p>Let <var>event loop</var> be <var>global</var>'s <a href=#relevant-agent id=queuing-tasks:relevant-agent>relevant agent</a>'s <a href=#concept-agent-event-loop id=queuing-tasks:concept-agent-event-loop>event loop</a>.<li><p>Let <var>document</var> be <var>global</var>'s <a href=nav-history-apis.html#concept-document-window id=queuing-tasks:concept-document-window>associated <code>Document</code></a>, if <var>global</var> is
   a <code id=queuing-tasks:window><a href=nav-history-apis.html#window>Window</a></code> object; otherwise null.</p>

   <li><p><a href=#queue-a-task id=queuing-tasks:queue-a-task-2>Queue a task</a> given <var>source</var>, <var>event loop</var>,
   <var>document</var>, and <var>steps</var>.</ol>

  <p>To <dfn id=queue-an-element-task data-export="">queue an element task</dfn> on a <a href=#task-source id=queuing-tasks:task-source-3>task source</a> <var>source</var>,
  with an element <var>element</var> and a series of steps <var>steps</var>:</p>

  <ol><li><p>Let <var>global</var> be <var>element</var>'s <a href=#concept-relevant-global id=queuing-tasks:concept-relevant-global>relevant global
   object</a>.<li><p><a href=#queue-a-global-task id=queuing-tasks:queue-a-global-task-2>Queue a global task</a> given <var>source</var>, <var>global</var>, and
   <var>steps</var>.</ol>

  <p>To <dfn id=queue-a-microtask data-export="">queue a microtask</dfn> which performs a series of steps <var>steps</var>,
  optionally given a document <var>document</var>:</p>

  <ol><li><p><a id=queuing-tasks:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: there is a <a id=queuing-tasks:surrounding-agent href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding agent</a>. I.e., this algorithm is
   not called while <a id=queuing-tasks:in-parallel href=infrastructure.html#in-parallel>in parallel</a>.<li><p>Let <var>eventLoop</var> be the <a id=queuing-tasks:surrounding-agent-2 href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding agent</a>'s <a href=#concept-agent-event-loop id=queuing-tasks:concept-agent-event-loop-2>event loop</a>.<li><p>If <var>document</var> was not given, set <var>document</var> to the <a href=#implied-document id=queuing-tasks:implied-document-3>implied
   document</a>.<li><p>Let <var>microtask</var> be a new <a href=#concept-task id=queuing-tasks:concept-task-2>task</a>.<li><p>Set <var>microtask</var>'s <a href=#concept-task-steps id=queuing-tasks:concept-task-steps-2>steps</a> to
   <var>steps</var>.<li><p>Set <var>microtask</var>'s <a href=#concept-task-source id=queuing-tasks:concept-task-source-2>source</a> to the
   <dfn id=microtask-task-source>microtask task source</dfn>.<li><p>Set <var>microtask</var>'s <a href=#concept-task-document id=queuing-tasks:concept-task-document-2>document</a> to
   <var>document</var>.<li><p>Set <var>microtask</var>'s <a href=#script-evaluation-environment-settings-object-set id=queuing-tasks:script-evaluation-environment-settings-object-set-2>script evaluation environment settings object set</a>
   to an empty <a id=queuing-tasks:set-2 href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a>.<li><p><a id=queuing-tasks:enqueue href=https://infra.spec.whatwg.org/#queue-enqueue data-x-internal=enqueue>Enqueue</a> <var>microtask</var> on <var>eventLoop</var>'s <a href=#microtask-queue id=queuing-tasks:microtask-queue>microtask
   queue</a>.</ol>

  <p class=note>It is possible for a <a href=#microtask id=queuing-tasks:microtask>microtask</a> to be moved to a regular <a href=#task-queue id=queuing-tasks:task-queue-2>task
  queue</a>, if, during its initial execution, it <a href=#spin-the-event-loop id=queuing-tasks:spin-the-event-loop>spins the
  event loop</a>. This is the only case in which the <a href=#concept-task-source id=queuing-tasks:concept-task-source-3>source</a>, <a href=#concept-task-document id=queuing-tasks:concept-task-document-3>document</a>,
  and <a href=#script-evaluation-environment-settings-object-set id=queuing-tasks:script-evaluation-environment-settings-object-set-3>script evaluation environment settings object set</a> of the microtask are consulted;
  they are ignored by the <a href=#perform-a-microtask-checkpoint id=queuing-tasks:perform-a-microtask-checkpoint>perform a microtask checkpoint</a> algorithm.</p>

  <p>The <dfn id=implied-event-loop>implied event loop</dfn> when queuing a task is the one that can deduced from the
  context of the calling algorithm. This is generally unambiguous, as most specification algorithms
  only ever involve a single <a id=queuing-tasks:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> (and thus a single <a href=#event-loop id=queuing-tasks:event-loop>event loop</a>). The
  exception is algorithms involving or specifying cross-agent communication (e.g., between a window
  and a worker); for those cases, the <a href=#implied-event-loop id=queuing-tasks:implied-event-loop-3>implied event loop</a> concept must not be relied
  upon and specifications must explicitly provide an <a href=#event-loop id=queuing-tasks:event-loop-2>event loop</a> when <a href=#queue-a-task id=queuing-tasks:queue-a-task-3>queuing a task</a>.</p>

  <p>The <dfn id=implied-document>implied document</dfn> when queuing a task on an <a href=#event-loop id=queuing-tasks:event-loop-3>event loop</a> <var>event
  loop</var> is determined as follows:</p>

  <ol><li><p>If <var>event loop</var> is not a <a href=#window-event-loop id=queuing-tasks:window-event-loop>window event loop</a>, then return
   null.<li><p>If the task is being queued in the context of an element, then return the element's
   <a id=queuing-tasks:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If the task is being queued in the context of a <a id=queuing-tasks:browsing-context href=document-sequences.html#browsing-context>browsing context</a>, then return
   the browsing context's <a id=queuing-tasks:active-document href=document-sequences.html#active-document>active document</a>.<li><p>If the task is being queued by or for a <a href=#concept-script id=queuing-tasks:concept-script>script</a>, then
   return the script's <a href=#settings-object id=queuing-tasks:settings-object>settings object</a>'s <a href=#concept-settings-object-global id=queuing-tasks:concept-settings-object-global>global object</a>'s <a href=nav-history-apis.html#concept-document-window id=queuing-tasks:concept-document-window-2>associated <code>Document</code></a>.<li><p><a id=queuing-tasks:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: this step is never reached, because one of the previous conditions is
   true. <span class=XXX>Really?</span></ol>

  <p class=XXX>Both <a href=#implied-event-loop id=queuing-tasks:implied-event-loop-4>implied event loop</a> and <a href=#implied-document id=queuing-tasks:implied-document-4>implied
  document</a> are vaguely-defined and have a lot of action-at-a-distance. The hope is to remove
  these, especially <a href=#implied-document id=queuing-tasks:implied-document-5>implied document</a>. See <a href=https://github.com/whatwg/html/issues/4980>issue #4980</a>.</p>


  <h5 id=event-loop-processing-model data-dfn-type=dfn data-lt="event loop processing model"><span class=secno>8.1.7.3</span> <span id=processing-model-8></span>Processing model<a href=#event-loop-processing-model class=self-link></a></h5>
  

  <p>An <a href=#event-loop id=event-loop-processing-model:event-loop>event loop</a> must continually run through the following steps for as long as it
  exists:</p>

  
  <ol id=step1><li><p>Let <var>oldestTask</var> and <var>taskStartTime</var> be null.<li>
    <p>If the <a href=#event-loop id=event-loop-processing-model:event-loop-2>event loop</a> has a <a href=#task-queue id=event-loop-processing-model:task-queue>task queue</a> with at least one <a href=#concept-task-runnable id=event-loop-processing-model:concept-task-runnable>runnable</a> <a href=#concept-task id=event-loop-processing-model:concept-task>task</a>,
    then:</p>

    <ol><li>
      <p>Let <var>taskQueue</var> be one such <a href=#task-queue id=event-loop-processing-model:task-queue-2>task queue</a>, chosen in an
      <a id=event-loop-processing-model:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner.</p>

      <p class=note>Remember that the <a href=#microtask-queue id=event-loop-processing-model:microtask-queue>microtask queue</a> is not a <a href=#task-queue id=event-loop-processing-model:task-queue-3>task
      queue</a>, so it will not be chosen in this step. However, a <a href=#task-queue id=event-loop-processing-model:task-queue-4>task queue</a> to
      which the <a href=#microtask-task-source id=event-loop-processing-model:microtask-task-source>microtask task source</a> is associated might be chosen in this step. In
      that case, the <a href=#concept-task id=event-loop-processing-model:concept-task-2>task</a> chosen in the next step was originally
      a <a href=#microtask id=event-loop-processing-model:microtask>microtask</a>, but it got moved as part of <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop>spinning the event loop</a>.</p>
     <li><p>Set <var>taskStartTime</var> to the <a id=event-loop-processing-model:unsafe-shared-current-time href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>.<li><p>Set <var>oldestTask</var> to the first <a href=#concept-task-runnable id=event-loop-processing-model:concept-task-runnable-2>runnable</a> <a href=#concept-task id=event-loop-processing-model:concept-task-3>task</a> in
     <var>taskQueue</var>, and <a href=https://infra.spec.whatwg.org/#list-remove id=event-loop-processing-model:list-remove data-x-internal=list-remove>remove</a> it from
     <var>taskQueue</var>.<li><p>If <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document>document</a> is not
     null, then <a id=event-loop-processing-model:record-task-start-time href=https://w3c.github.io/long-animation-frames/#record-task-start-time data-x-internal=record-task-start-time>record task start time</a> given <var>taskStartTime</var> and
     <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document-2>document</a>.<li><p>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-3>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task>currently running task</a> to
     <var>oldestTask</var>.<li><p>Perform <var>oldestTask</var>'s <a href=#concept-task-steps id=event-loop-processing-model:concept-task-steps>steps</a>.<li><p>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-4>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-2>currently running task</a> back to
     null.<li><p><a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint>Perform a microtask checkpoint</a>.</ol>
   <li><p>Let <var>taskEndTime</var> be the <a id=event-loop-processing-model:unsafe-shared-current-time-2 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>.
   <a href=references.html#refsHRT>[HRT]</a><li>
    <p>If <var>oldestTask</var> is not null, then:</p>

    <ol><li><p>Let <var>top-level browsing contexts</var> be an empty <a id=event-loop-processing-model:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a>.<li>
      <p>For each <a href=#environment-settings-object id=event-loop-processing-model:environment-settings-object>environment settings object</a> <var>settings</var> of
      <var>oldestTask</var>'s <a href=#script-evaluation-environment-settings-object-set id=event-loop-processing-model:script-evaluation-environment-settings-object-set>script evaluation environment settings object set</a>:</p>

      <ol><li><p>Let <var>global</var> be <var>settings</var>'s <a href=#concept-settings-object-global id=event-loop-processing-model:concept-settings-object-global>global object</a>.<li><p>If <var>global</var> is not a <code id=event-loop-processing-model:window><a href=nav-history-apis.html#window>Window</a></code> object, then
       <a id=event-loop-processing-model:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>If <var>global</var>'s <a href=nav-history-apis.html#window-bc id=event-loop-processing-model:window-bc>browsing context</a> is null, then
       <a id=event-loop-processing-model:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>Let <var>tlbc</var> be <var>global</var>'s <a href=nav-history-apis.html#window-bc id=event-loop-processing-model:window-bc-2>browsing
       context</a>'s <a href=document-sequences.html#bc-tlbc id=event-loop-processing-model:bc-tlbc>top-level browsing context</a>.<li><p>If <var>tlbc</var> is not null, then <a href=https://infra.spec.whatwg.org/#set-append id=event-loop-processing-model:set-append data-x-internal=set-append>append</a> it to
       <var>top-level browsing contexts</var>.</ol>
     <li><p><a id=event-loop-processing-model:report-long-tasks href=https://w3c.github.io/longtasks/#report-long-tasks data-x-internal=report-long-tasks>Report long tasks</a>, passing in <var>taskStartTime</var>,
     <var>taskEndTime</var>, <var>top-level browsing contexts</var>, and
     <var>oldestTask</var>.<li><p>If <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document-3>document</a> is not
     null, then <a id=event-loop-processing-model:record-task-end-time href=https://w3c.github.io/long-animation-frames/#record-task-end-time data-x-internal=record-task-end-time>record task end time</a> given <var>taskEndTime</var> and
     <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document-4>document</a>.</ol>
   <li id=idle-deadline-computation>
    <p>If this is a <a href=#window-event-loop id=event-loop-processing-model:window-event-loop>window event loop</a> that has no <a href=#concept-task-runnable id=event-loop-processing-model:concept-task-runnable-3><em>runnable</em></a> <a href=#concept-task id=event-loop-processing-model:concept-task-4>task</a>
    in this <a href=#event-loop id=event-loop-processing-model:event-loop-5>event loop</a>'s <a href=#task-queue id=event-loop-processing-model:task-queue-5>task queues</a>, then:</p>

    <ol><li><p>Set this <a href=#event-loop id=event-loop-processing-model:event-loop-6>event loop</a>'s <a href=#last-idle-period-start-time id=event-loop-processing-model:last-idle-period-start-time>last idle period start time</a> to the
     <a id=event-loop-processing-model:unsafe-shared-current-time-3 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>.<li>
      <p>Let <var>computeDeadline</var> be the following steps:</p>

      <ol><li>
        <p>Let <var>deadline</var> be this <a href=#event-loop id=event-loop-processing-model:event-loop-7>event loop</a>'s <a href=#last-idle-period-start-time id=event-loop-processing-model:last-idle-period-start-time-2>last idle period start
        time</a> plus 50.</p>

        <p class=note>The cap of 50ms in the future is to ensure responsiveness to new user input
        within the threshold of human perception.</p>
       <li><p>Let <var>hasPendingRenders</var> be false.<li>
        <p>For each <var>windowInSameLoop</var> of the <a href=#same-loop-windows id=event-loop-processing-model:same-loop-windows>same-loop windows</a> for this
        <a href=#event-loop id=event-loop-processing-model:event-loop-8>event loop</a>:</p>

        <ol><li><p>If <var>windowInSameLoop</var>'s <a id=event-loop-processing-model:list-of-animation-frame-callbacks href=imagebitmap-and-animations.html#list-of-animation-frame-callbacks>map of animation frame callbacks</a> is
         not <a href=https://infra.spec.whatwg.org/#map-is-empty id=event-loop-processing-model:map-empty data-x-internal=map-empty>empty</a>, or if the user agent believes that the
         <var>windowInSameLoop</var> might have pending rendering updates, set
         <var>hasPendingRenders</var> to true.<li><p>Let <var>timerCallbackEstimates</var> be the result of <a href=https://infra.spec.whatwg.org/#map-getting-the-values id=event-loop-processing-model:map-get-the-values data-x-internal=map-get-the-values>getting the values</a> of <var>windowInSameLoop</var>'s <a id=event-loop-processing-model:map-of-active-timers href=timers-and-user-prompts.html#map-of-active-timers>map of active
         timers</a>.<li><p>For each <var>timeoutDeadline</var> of <var>timerCallbackEstimates</var>, if
         <var>timeoutDeadline</var> is less than <var>deadline</var>, set <var>deadline</var> to
         <var>timeoutDeadline</var>.</ol>
       <li>
        <p>If <var>hasPendingRenders</var> is true, then:</p>

        <ol><li>
          <p>Let <var>nextRenderDeadline</var> be this <a href=#event-loop id=event-loop-processing-model:event-loop-9>event loop</a>'s <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time>last render
          opportunity time</a> plus (1000 divided by the current refresh rate).</p>

          <p>The refresh rate can be hardware- or implementation-specific. For a refresh rate of
          60Hz, the <var>nextRenderDeadline</var> would be about 16.67ms after the <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time-2>last
          render opportunity time</a>.</p>
         <li><p>If <var>nextRenderDeadline</var> is less than <var>deadline</var>, then return
         <var>nextRenderDeadline</var>.</ol>
       <li><p>Return <var>deadline</var>.</ol>
     <li><p>For each <var>win</var> of the <a href=#same-loop-windows id=event-loop-processing-model:same-loop-windows-2>same-loop windows</a> for this <a href=#event-loop id=event-loop-processing-model:event-loop-10>event
     loop</a>, perform the <a id=event-loop-processing-model:start-an-idle-period-algorithm href=https://w3c.github.io/requestidlecallback/#start-an-idle-period-algorithm data-x-internal=start-an-idle-period-algorithm>start an idle period algorithm</a> for <var>win</var> with
     the following step: return the result of calling <var>computeDeadline</var>, <a href=https://w3c.github.io/hr-time/#dfn-coarsen-time id=event-loop-processing-model:coarsen-time data-x-internal=coarsen-time>coarsened</a> given <var>win</var>'s <a href=#relevant-settings-object id=event-loop-processing-model:relevant-settings-object>relevant settings
     object</a>'s <a href=#concept-settings-object-cross-origin-isolated-capability id=event-loop-processing-model:concept-settings-object-cross-origin-isolated-capability>cross-origin isolated
     capability</a>. <a href=references.html#refsREQUESTIDLECALLBACK>[REQUESTIDLECALLBACK]</a></ol>
   <li>
    <p>If this is a <a href=#worker-event-loop-2 id=event-loop-processing-model:worker-event-loop-2>worker event loop</a>, then:</p>

    <ol><li>
      <p>If this <a href=#event-loop id=event-loop-processing-model:event-loop-11>event loop</a>'s <a id=event-loop-processing-model:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a>'s single <a id=event-loop-processing-model:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>'s <a href=#concept-realm-global id=event-loop-processing-model:concept-realm-global>global object</a> is a <a href=imagebitmap-and-animations.html#concept-animationframeprovider-supported id=event-loop-processing-model:concept-animationframeprovider-supported>supported</a>
      <code id=event-loop-processing-model:dedicatedworkerglobalscope><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code> and the user agent believes that it would benefit
      from having its rendering updated at this time, then:</p>
      

      <ol><li><p>Let <var>now</var> be the <a id=event-loop-processing-model:current-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given the
       <code id=event-loop-processing-model:dedicatedworkerglobalscope-2><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>. <a href=references.html#refsHRT>[HRT]</a><li><p><a id=event-loop-processing-model:run-the-animation-frame-callbacks href=imagebitmap-and-animations.html#run-the-animation-frame-callbacks>Run the animation frame callbacks</a> for that
       <code id=event-loop-processing-model:dedicatedworkerglobalscope-3><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>, passing in <var>now</var> as the
       timestamp.<li><p>Update the rendering of that dedicated worker to reflect the current state.</ol>

      <p class=note>Similar to the notes for <a href=#update-the-rendering id=event-loop-processing-model:update-the-rendering>updating the
      rendering</a> in a <a href=#window-event-loop id=event-loop-processing-model:window-event-loop-2>window event loop</a>, a user agent can determine the rate of
      rendering in the dedicated worker.</p>
     <li><p>If there are no <a href=#concept-task id=event-loop-processing-model:concept-task-5>tasks</a> in the <a href=#event-loop id=event-loop-processing-model:event-loop-12>event
     loop</a>'s <a href=#task-queue id=event-loop-processing-model:task-queue-6>task queues</a> and the
     <code id=event-loop-processing-model:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code> object's <a href=workers.html#dom-workerglobalscope-closing id=event-loop-processing-model:dom-workerglobalscope-closing>closing</a> flag is true, then destroy the
     <a href=#event-loop id=event-loop-processing-model:event-loop-13>event loop</a>, aborting these steps, resuming the <a id=event-loop-processing-model:run-a-worker href=workers.html#run-a-worker>run a worker</a> steps
     described in the <a href=workers.html#workers>Web workers</a> section below.</ol>
   </ol>

  <p>A <a href=#window-event-loop id=event-loop-processing-model:window-event-loop-3>window event loop</a> <var>eventLoop</var> must also run the following <a id=event-loop-processing-model:in-parallel href=infrastructure.html#in-parallel>in
  parallel</a>, as long as it exists:</p>

  <ol><li><p>Wait until at least one <a id=event-loop-processing-model:navigable href=document-sequences.html#navigable>navigable</a> whose <a href=document-sequences.html#nav-document id=event-loop-processing-model:nav-document>active
   document</a>'s <a href=#relevant-agent id=event-loop-processing-model:relevant-agent>relevant agent</a>'s <a href=#concept-agent-event-loop id=event-loop-processing-model:concept-agent-event-loop>event
   loop</a> is <var>eventLoop</var> might have a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity>rendering opportunity</a>.<li><p>Set <var>eventLoop</var>'s <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time-3>last render opportunity time</a> to the <a id=event-loop-processing-model:unsafe-shared-current-time-4 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe
   shared current time</a>.<li>
    <p>For each <var>navigable</var> that has a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-2>rendering opportunity</a>, <a href=#queue-a-global-task id=event-loop-processing-model:queue-a-global-task>queue a
    global task</a> on the <a href=#rendering-task-source id=event-loop-processing-model:rendering-task-source>rendering task source</a> given <var>navigable</var>'s <a href=document-sequences.html#nav-window id=event-loop-processing-model:nav-window>active window</a> to <dfn id=update-the-rendering data-export="">update the rendering</dfn>:</p>

    <p class=note>This might cause redundant calls to <a href=#update-the-rendering id=event-loop-processing-model:update-the-rendering-2>update the rendering</a>. However,
    these calls would have no observable effect because there will be no rendering necessary, as
    per the <i>Unnecessary rendering</i> step. Implementations can introduce further optimizations
    such as only queuing this task when it is not already queued. However, note that the document
    associated with the task might become inactive before the task is processed.</p>

    <ol><li><p>Let <var>frameTimestamp</var> be <var>eventLoop</var>'s <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time-4>last render opportunity
     time</a>.<li>
      <p>Let <var>docs</var> be all <a id=event-loop-processing-model:fully-active href=document-sequences.html#fully-active>fully active</a> <code id=event-loop-processing-model:document><a href=dom.html#document>Document</a></code> objects whose
      <a href=#relevant-agent id=event-loop-processing-model:relevant-agent-2>relevant agent</a>'s <a href=#concept-agent-event-loop id=event-loop-processing-model:concept-agent-event-loop-2>event loop</a> is
      <var>eventLoop</var>, sorted arbitrarily except that the following conditions must be
      met:</p>

      <ul><li><p>Any <code id=event-loop-processing-model:document-2><a href=dom.html#document>Document</a></code> <var>B</var> whose <a href=document-sequences.html#doc-container-document id=event-loop-processing-model:doc-container-document>container document</a> is <var>A</var> must be listed
       after <var>A</var> in the list.<li><p>If there are two documents <var>A</var> and <var>B</var> that both have the same
       non-null <a href=document-sequences.html#doc-container-document id=event-loop-processing-model:doc-container-document-2>container document</a> <var>C</var>, then
       the order of <var>A</var> and <var>B</var> in the list must match the <a id=event-loop-processing-model:shadow-including-tree-order href=https://dom.spec.whatwg.org/#concept-shadow-including-tree-order data-x-internal=shadow-including-tree-order>shadow-including
       tree order</a> of their respective <a href=document-sequences.html#navigable-container id=event-loop-processing-model:navigable-container>navigable
       containers</a> in <var>C</var>'s <a id=event-loop-processing-model:node-tree href=https://dom.spec.whatwg.org/#concept-node-tree data-x-internal=node-tree>node tree</a>.</ul>

      <p>In the steps below that iterate over <var>docs</var>, each <code id=event-loop-processing-model:document-3><a href=dom.html#document>Document</a></code> must be
      processed in the order it is found in the list.</p>
     <li>
      <p><i>Filter non-renderable documents</i>: Remove from <var>docs</var> any
      <code id=event-loop-processing-model:document-4><a href=dom.html#document>Document</a></code> object <var>doc</var> for which any of the following are true:

      <ul><li><p><var>doc</var> is <a id=event-loop-processing-model:render-blocked href=dom.html#render-blocked>render-blocked</a>;<li><p><var>doc</var>'s <a id=event-loop-processing-model:visibility-state href=interaction.html#visibility-state>visibility state</a> is "<code>hidden</code>";<li><p><var>doc</var>'s rendering is <a href=https://drafts.csswg.org/css-view-transitions/#document-rendering-suppression-for-view-transitions id=event-loop-processing-model:rendering-suppression-for-view-transitions data-x-internal=rendering-suppression-for-view-transitions>suppressed for view transitions</a>; or<li><p><var>doc</var>'s <a id=event-loop-processing-model:node-navigable href=document-sequences.html#node-navigable>node navigable</a> doesn't currently have a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-3>rendering
       opportunity</a>.</ul>

      <p class=note>We have to check for rendering opportunities here, in addition to checking
      that in the <a id=event-loop-processing-model:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a> steps, as some documents that share the same <a href=#event-loop id=event-loop-processing-model:event-loop-14>event
      loop</a> might not have a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-4>rendering opportunity</a> at the same time.</p>
     <li>
      <p><i>Unnecessary rendering</i>: Remove from <var>docs</var> any <code id=event-loop-processing-model:document-5><a href=dom.html#document>Document</a></code> object
      <var>doc</var> for which all of the following are true:</p>

      <ul><li><p>the user agent believes that updating the rendering of <var>doc</var>'s <a id=event-loop-processing-model:node-navigable-2 href=document-sequences.html#node-navigable>node
       navigable</a> would have no visible effect; and<li><p><var>doc</var>'s <a id=event-loop-processing-model:list-of-animation-frame-callbacks-2 href=imagebitmap-and-animations.html#list-of-animation-frame-callbacks>map of animation frame callbacks</a> is empty.</ul>
     <li>
      <p>Remove from <var>docs</var> all <code id=event-loop-processing-model:document-6><a href=dom.html#document>Document</a></code> objects for which the user agent
      believes that it's preferable to skip updating the rendering for other reasons.</p>

      <div class=note>
       <p>The step labeled <i>Filter non-renderable documents</i> prevents the user agent from
       updating the rendering when it is unable to present new content to the user.</p>

       <p>The step labeled <i>Unnecessary rendering</i> prevents the user agent from updating the
       rendering when there's no new content to draw.</p>

       <p>This step enables the user agent to prevent the steps below from running for other
       reasons, for example, to ensure certain <a href=#concept-task id=event-loop-processing-model:concept-task-6>tasks</a> are
       executed immediately after each other, with only <a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-2>microtask checkpoints</a> interleaved (and without, e.g., <a href=imagebitmap-and-animations.html#run-the-animation-frame-callbacks id=event-loop-processing-model:run-the-animation-frame-callbacks-2>animation frame callbacks</a> interleaved). Concretely, a
       user agent might wish to coalesce timer callbacks together, with no intermediate rendering
       updates.</p>
      </div>
     <li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:reveal href=browsing-the-web.html#reveal>reveal</a> <var>doc</var>.<li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:flush-autofocus-candidates href=interaction.html#flush-autofocus-candidates>flush autofocus candidates</a> for
     <var>doc</var> if its <a id=event-loop-processing-model:node-navigable-3 href=document-sequences.html#node-navigable>node navigable</a> is a <a id=event-loop-processing-model:top-level-traversable href=document-sequences.html#top-level-traversable>top-level
     traversable</a>.<li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-resize-steps href=https://drafts.csswg.org/cssom-view/#document-run-the-resize-steps data-x-internal=run-the-resize-steps>run the resize steps</a> for
     <var>doc</var>. <a href=references.html#refsCSSOMVIEW>[CSSOMVIEW]</a><li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-scroll-steps href=https://drafts.csswg.org/cssom-view/#document-run-the-scroll-steps data-x-internal=run-the-scroll-steps>run the scroll steps</a> for
     <var>doc</var>. <a href=references.html#refsCSSOMVIEW>[CSSOMVIEW]</a><li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:evaluate-media-queries-and-report-changes href=https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes data-x-internal=evaluate-media-queries-and-report-changes>evaluate media queries and report
     changes</a> for <var>doc</var>. <a href=references.html#refsCSSOMVIEW>[CSSOMVIEW]</a><li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:update-animations-and-send-events href=https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events data-x-internal=update-animations-and-send-events>update animations and send
     events</a> for <var>doc</var>, passing in <a id=event-loop-processing-model:relative-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-relative-high-resolution-time data-x-internal=relative-high-resolution-time>relative high resolution time</a> given
     <var>frameTimestamp</var> and <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global>relevant global object</a> as the
     timestamp. <a href=references.html#refsWEBANIMATIONS>[WEBANIMATIONS]</a><li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-fullscreen-steps href=https://fullscreen.spec.whatwg.org/#run-the-fullscreen-steps data-x-internal=run-the-fullscreen-steps>run the fullscreen steps</a> for
     <var>doc</var>. <a href=references.html#refsFULLSCREEN>[FULLSCREEN]</a><li>
      <p>For each <var>doc</var> of <var>docs</var>, if the user agent detects that the backing
      storage associated with a <code id=event-loop-processing-model:canvasrenderingcontext2d><a href=canvas.html#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> or an
      <code id=event-loop-processing-model:offscreencanvasrenderingcontext2d><a href=canvas.html#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code>, <var>context</var>, has been lost, then it
      must run the <dfn id=context-lost-steps>context lost steps</dfn> for each such <var>context</var>:</p>

      <ol><li><p>Let <var>canvas</var> be the value of <var>context</var>'s <code id=event-loop-processing-model:dom-context-2d-canvas><a href=canvas.html#dom-context-2d-canvas>canvas</a></code> attribute, if <var>context</var> is a
       <code id=event-loop-processing-model:canvasrenderingcontext2d-2><a href=canvas.html#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>, or the <a id=event-loop-processing-model:associated-offscreencanvas-object href=canvas.html#associated-offscreencanvas-object>associated <code>OffscreenCanvas</code>
       object</a> for <var>context</var> otherwise.<li><p>Set <var>context</var>'s <a href=canvas.html#concept-canvas-context-lost id=event-loop-processing-model:concept-canvas-context-lost>context
       lost</a> to true.<li><p><a id=event-loop-processing-model:reset-the-rendering-context-to-its-default-state href=canvas.html#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a> given
       <var>context</var>.<li><p>Let <var>shouldRestore</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=event-loop-processing-model:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=event-loop-processing-model:event-contextlost><a href=indices.html#event-contextlost>contextlost</a></code> at <var>canvas</var>, with the <code id=event-loop-processing-model:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li><p>If <var>shouldRestore</var> is false, then abort these steps.<li><p>Attempt to restore <var>context</var> by creating a backing storage using
       <var>context</var>'s attributes and associating them with <var>context</var>. If this fails,
       then abort these steps.<li><p>Set <var>context</var>'s <a href=canvas.html#concept-canvas-context-lost id=event-loop-processing-model:concept-canvas-context-lost-2>context
       lost</a> to false.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=event-loop-processing-model:concept-event-fire-2 data-x-internal=concept-event-fire>Fire an event</a> named <code id=event-loop-processing-model:event-contextrestored><a href=indices.html#event-contextrestored>contextrestored</a></code> at <var>canvas</var>.</ol>
     <li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-animation-frame-callbacks-3 href=imagebitmap-and-animations.html#run-the-animation-frame-callbacks>run the animation frame
     callbacks</a> for <var>doc</var>, passing in the <a id=event-loop-processing-model:relative-high-resolution-time-2 href=https://w3c.github.io/hr-time/#dfn-relative-high-resolution-time data-x-internal=relative-high-resolution-time>relative high resolution time</a>
     given <var>frameTimestamp</var> and <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global-2>relevant global object</a> as
     the timestamp.<li><p>Let <var>unsafeStyleAndLayoutStartTime</var> be the <a id=event-loop-processing-model:unsafe-shared-current-time-5 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current
     time</a>.</p>

     <li>
      <p>For each <var>doc</var> of <var>docs</var>:</p>

      <ol><li><p>Let <var>resizeObserverDepth</var> be 0.<li>
        <p>While true:</p>

        <ol><li><p>Recalculate styles and update layout for <var>doc</var>.<li><p>Let <var>hadInitialVisibleContentVisibilityDetermination</var> be false.<li>
          <p>For each element <var>element</var> with <a href=https://drafts.csswg.org/css-contain/#propdef-content-visibility id=event-loop-processing-model:content-visibility-auto data-x-internal=content-visibility-auto>'auto'</a> used value of
          <a id="event-loop-processing-model:'content-visibility'" href=https://drafts.csswg.org/css-contain/#content-visibility data-x-internal="'content-visibility'">'content-visibility'</a>:</p>

          <ol><li><p>Let <var>checkForInitialDetermination</var> be true if <var>element</var>'s
           <a id=event-loop-processing-model:proximity-to-the-viewport href=https://drafts.csswg.org/css-contain/#proximity-to-the-viewport data-x-internal=proximity-to-the-viewport>proximity to the viewport</a> is not determined and it is not <a id=event-loop-processing-model:relevant-to-the-user href=https://drafts.csswg.org/css-contain/#relevant-to-the-user data-x-internal=relevant-to-the-user>relevant to
           the user</a>. Otherwise, let <var>checkForInitialDetermination</var> be
           false.<li><p>Determine <a id=event-loop-processing-model:proximity-to-the-viewport-2 href=https://drafts.csswg.org/css-contain/#proximity-to-the-viewport data-x-internal=proximity-to-the-viewport>proximity to the viewport</a> for <var>element</var>.<li><p>If <var>checkForInitialDetermination</var> is true and <var>element</var> is now
           <a id=event-loop-processing-model:relevant-to-the-user-2 href=https://drafts.csswg.org/css-contain/#relevant-to-the-user data-x-internal=relevant-to-the-user>relevant to the user</a>, then set
           <var>hadInitialVisibleContentVisibilityDetermination</var> to true.</ol>
         <li>
          <p>If <var>hadInitialVisibleContentVisibilityDetermination</var> is true, then
          <a id=event-loop-processing-model:continue-3 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.</p>

          <p class=note>The intent of this step is for the initial viewport proximity
          determination, which takes effect immediately, to be reflected in the style and layout
          calculation which is carried out in a previous step of this loop. Proximity
          determinations other than the initial one take effect at the next <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-5>rendering
          opportunity</a>. <a href=references.html#refsCSSCONTAIN>[CSSCONTAIN]</a></p>
         <li><p><a id=event-loop-processing-model:gather-active-resize-observations-at-depth href=https://drafts.csswg.org/resize-observer-1/#gather-active-observations-h data-x-internal=gather-active-resize-observations-at-depth>Gather active resize observations at depth</a>
         <var>resizeObserverDepth</var> for <var>doc</var>.<li><p>If <var>doc</var> <a id=event-loop-processing-model:has-active-resize-observations href=https://drafts.csswg.org/resize-observer-1/#has-active-observations-h data-x-internal=has-active-resize-observations>has active resize observations</a>:</p>

          <ol><li><p>Set <var>resizeObserverDepth</var> to the result of <a href=https://drafts.csswg.org/resize-observer-1/#broadcast-resize-notifications-h id=event-loop-processing-model:broadcast-active-resize-observations data-x-internal=broadcast-active-resize-observations>broadcasting active resize observations</a> given
           <var>doc</var>.<li><a id=event-loop-processing-model:continue-4 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
         <li>Otherwise, <a id=event-loop-processing-model:break href=https://infra.spec.whatwg.org/#iteration-break data-x-internal=break>break</a>.</ol>
       <li><p>If <var>doc</var> <a id=event-loop-processing-model:has-skipped-resize-observations href=https://drafts.csswg.org/resize-observer-1/#has-skipped-observations-h data-x-internal=has-skipped-resize-observations>has skipped resize observations</a>, then <a id=event-loop-processing-model:deliver-resize-loop-error href=https://drafts.csswg.org/resize-observer-1/#deliver-resize-error data-x-internal=deliver-resize-loop-error>deliver
       resize loop error</a> given <var>doc</var>.</ol>
     <li id=focus-fixup-rule>
      <p>For each <var>doc</var> of <var>docs</var>, if the <a href=interaction.html#focused-area-of-the-document id=event-loop-processing-model:focused-area-of-the-document>focused area</a> of <var>doc</var> is not a <a id=event-loop-processing-model:focusable-area href=interaction.html#focusable-area>focusable area</a>, then
      run the <a id=event-loop-processing-model:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> for <var>doc</var>'s <a id=event-loop-processing-model:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>, and set
      <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global-3>relevant global object</a>'s <a href=nav-history-apis.html#window-navigation-api id=event-loop-processing-model:window-navigation-api>navigation API</a>'s <a id=event-loop-processing-model:focus-changed-during-ongoing-navigation href=nav-history-apis.html#focus-changed-during-ongoing-navigation>focus changed during ongoing
      navigation</a> to false.</p>

      <p class=example>For example, this might happen because an element has the <code id=event-loop-processing-model:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute added, causing it to stop <a id=event-loop-processing-model:being-rendered href=rendering.html#being-rendered>being
      rendered</a>. It might also happen to an <code id=event-loop-processing-model:the-input-element><a href=input.html#the-input-element>input</a></code> element when the element gets
      <a href=form-control-infrastructure.html#concept-fe-disabled id=event-loop-processing-model:concept-fe-disabled>disabled</a>.</p>

      <p class=note>This will <a href=interaction.html#note-sometimes-no-blur-event>usually</a> fire <code id=event-loop-processing-model:event-blur><a href=indices.html#event-blur>blur</a></code> events, and possibly <code id=event-loop-processing-model:event-change><a href=indices.html#event-change>change</a></code> events.</p>

      <p class=note>In addition to this asynchronous fixup, if the <a id=event-loop-processing-model:focused-area-of-the-document-2 href=interaction.html#focused-area-of-the-document>focused area of the
      document</a> is removed, there is a <a href=infrastructure.html#node-remove-focus-fixup>synchronous
      fixup</a>. That one will <em>not</em> fire <code id=event-loop-processing-model:event-blur-2><a href=indices.html#event-blur>blur</a></code> or <code id=event-loop-processing-model:event-change-2><a href=indices.html#event-change>change</a></code> events.</p>
     <li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:perform-pending-transition-operations href=https://drafts.csswg.org/css-view-transitions/#perform-pending-transition-operations data-x-internal=perform-pending-transition-operations>perform pending transition
     operations</a> for <var>doc</var>. <a href=references.html#refsCSSVIEWTRANSITIONS>[CSSVIEWTRANSITIONS]</a><li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-update-intersection-observations-steps href=https://w3c.github.io/IntersectionObserver/#run-the-update-intersection-observations-steps data-x-internal=run-the-update-intersection-observations-steps>run the update intersection
     observations steps</a> for <var>doc</var>, passing in the <a id=event-loop-processing-model:relative-high-resolution-time-3 href=https://w3c.github.io/hr-time/#dfn-relative-high-resolution-time data-x-internal=relative-high-resolution-time>relative high resolution
     time</a> given <var>now</var> and <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global-4>relevant global object</a> as
     the timestamp. <a href=references.html#refsINTERSECTIONOBSERVER>[INTERSECTIONOBSERVER]</a><li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:record-rendering-time href=https://w3c.github.io/long-animation-frames/#record-rendering-time data-x-internal=record-rendering-time>record rendering time</a> for
     <var>doc</var> given <var>unsafeStyleAndLayoutStartTime</var>.<li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:mark-paint-timing href=https://w3c.github.io/paint-timing/#mark-paint-timing data-x-internal=mark-paint-timing>mark paint timing</a> for
     <var>doc</var>.<li><p>For each <var>doc</var> of <var>docs</var>, update the rendering or user interface of
     <var>doc</var> and its <a id=event-loop-processing-model:node-navigable-4 href=document-sequences.html#node-navigable>node navigable</a> to reflect the current state.<li><p>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:process-top-layer-removals href=https://drafts.csswg.org/css-position-4/#process-top-layer-removals data-x-internal=process-top-layer-removals>process top layer removals</a>
     given <var>doc</var>.</ol>
   </ol>

  <p>A <a id=event-loop-processing-model:navigable-2 href=document-sequences.html#navigable>navigable</a> has a <dfn id=rendering-opportunity data-export="">rendering opportunity</dfn> if the user agent is
  currently able to present the contents of the <a id=event-loop-processing-model:navigable-3 href=document-sequences.html#navigable>navigable</a> to the user, accounting for
  hardware refresh rate constraints and user agent throttling for performance reasons, but
  considering content presentable even if it's outside the viewport.</p>

  <p>A <a id=event-loop-processing-model:navigable-4 href=document-sequences.html#navigable>navigable</a>'s <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-6>rendering opportunities</a>
  are determined based on hardware constraints such as display refresh rates and other factors such
  as page performance or whether its <a href=document-sequences.html#nav-document id=event-loop-processing-model:nav-document-2>active document</a>'s
  <a id=event-loop-processing-model:visibility-state-2 href=interaction.html#visibility-state>visibility state</a> is "<code>visible</code>". Rendering opportunities
  typically occur at regular intervals.</p>

  <p class=note>This specification does not mandate any particular model for selecting rendering
  opportunities. But for example, if the browser is attempting to achieve a 60Hz refresh rate, then
  rendering opportunities occur at a maximum of every 60th of a second (about 16.7ms). If the
  browser finds that a <a id=event-loop-processing-model:navigable-5 href=document-sequences.html#navigable>navigable</a> is not able to sustain this rate, it might drop to a
  more sustainable 30 rendering opportunities per second for that <a id=event-loop-processing-model:navigable-6 href=document-sequences.html#navigable>navigable</a>, rather
  than occasionally dropping frames. Similarly, if a <a id=event-loop-processing-model:navigable-7 href=document-sequences.html#navigable>navigable</a> is not visible, the
  user agent might decide to drop that page to a much slower 4 rendering opportunities per second,
  or even less.</p>


  <hr>

  <p>When a user agent is to <dfn id=perform-a-microtask-checkpoint data-export="">perform a microtask checkpoint</dfn>:</p>

  <ol><li><p>If the <a href=#event-loop id=event-loop-processing-model:event-loop-15>event loop</a>'s <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint>performing a microtask checkpoint</a> is true,
   then return.<li><p>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-16>event loop</a>'s <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-2>performing a microtask checkpoint</a> to
   true.<li>
    <p>While the <a href=#event-loop id=event-loop-processing-model:event-loop-17>event loop</a>'s <a href=#microtask-queue id=event-loop-processing-model:microtask-queue-2>microtask queue</a> is not <a href=https://infra.spec.whatwg.org/#list-is-empty id=event-loop-processing-model:list-is-empty data-x-internal=list-is-empty>empty</a>:</p>

    <ol><li><p>Let <var>oldestMicrotask</var> be the result of <a href=https://infra.spec.whatwg.org/#queue-dequeue id=event-loop-processing-model:dequeue data-x-internal=dequeue>dequeuing</a>
     from the <a href=#event-loop id=event-loop-processing-model:event-loop-18>event loop</a>'s <a href=#microtask-queue id=event-loop-processing-model:microtask-queue-3>microtask queue</a>.<li><p>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-19>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-3>currently running task</a> to
     <var>oldestMicrotask</var>.<li>
      <p>Run <var>oldestMicrotask</var>.</p>

      <p class=note>This might involve invoking scripted callbacks, which eventually calls the
      <a href=#clean-up-after-running-script id=event-loop-processing-model:clean-up-after-running-script>clean up after running script</a> steps, which call this <a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-3>perform a microtask
      checkpoint</a> algorithm again, which is why we use the <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-3>performing a microtask
      checkpoint</a> flag to avoid reentrancy.</p>
     <li><p>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-20>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-4>currently running task</a> back to
     null.</ol>
   <li><p>For each <a href=#environment-settings-object id=event-loop-processing-model:environment-settings-object-2>environment settings object</a> <var>settingsObject</var> whose
   <a href=#responsible-event-loop id=event-loop-processing-model:responsible-event-loop>responsible event loop</a> is this <a href=#event-loop id=event-loop-processing-model:event-loop-21>event loop</a>, <a href=#notify-about-rejected-promises id=event-loop-processing-model:notify-about-rejected-promises>notify about rejected
   promises</a> given <var>settingsObject</var>'s <a href=#concept-settings-object-global id=event-loop-processing-model:concept-settings-object-global-2>global object</a>.<li><p><a id=event-loop-processing-model:cleanup-indexed-database-transactions href=https://w3c.github.io/IndexedDB/#cleanup-indexed-database-transactions data-x-internal=cleanup-indexed-database-transactions>Cleanup Indexed Database transactions</a>.<li>
    <p>Perform <a id=event-loop-processing-model:clearkeptobjects href=https://tc39.es/ecma262/#sec-clear-kept-objects data-x-internal=clearkeptobjects>ClearKeptObjects</a>().</p>

    <p class=note>When <code id=event-loop-processing-model:weakref.prototype.deref()><a data-x-internal=weakref.prototype.deref() href=https://tc39.es/ecma262/#sec-weak-ref.prototype.deref>WeakRef.prototype.deref()</a></code> returns an object, that object is
    kept alive until the next invocation of <a id=event-loop-processing-model:clearkeptobjects-2 href=https://tc39.es/ecma262/#sec-clear-kept-objects data-x-internal=clearkeptobjects>ClearKeptObjects</a>(), after which it is again
    subject to garbage collection.</p>
   <li><p>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-22>event loop</a>'s <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-4>performing a microtask checkpoint</a> to
   false.<li><p><a id=event-loop-processing-model:record-timing-info-for-microtask-checkpoint href=https://w3c.github.io/long-animation-frames/#record-timing-info-for-microtask-checkpoint data-x-internal=record-timing-info-for-microtask-checkpoint>Record timing info for microtask checkpoint</a>.</ol>

  <hr>

  <p>When an algorithm running <a id=event-loop-processing-model:in-parallel-3 href=infrastructure.html#in-parallel>in parallel</a> is to <dfn id=await-a-stable-state>await a stable state</dfn>, the
  user agent must <a href=#queue-a-microtask id=event-loop-processing-model:queue-a-microtask>queue a microtask</a> that runs the following steps, and must then stop
  executing (execution of the algorithm resumes when the microtask is run, as described in the
  following steps):</p>

  <ol><li><p>Run the algorithm's <dfn id=synchronous-section>synchronous section</dfn>.<li><p>Resume execution of the algorithm <a id=event-loop-processing-model:in-parallel-4 href=infrastructure.html#in-parallel>in parallel</a>, if appropriate, as described
   in the algorithm's steps.</ol>

  <p class=note>Steps in <a href=#synchronous-section id=event-loop-processing-model:synchronous-section>synchronous sections</a> are marked
  with ⌛.</p>

  <hr>

  <p>Algorithm steps that say to <dfn id=spin-the-event-loop>spin the event loop</dfn> until a condition <var>goal</var> is
  met are equivalent to substituting in the following algorithm steps:</p>

  <ol><li>
    <p>Let <var>task</var> be the <a href=#event-loop id=event-loop-processing-model:event-loop-23>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-5>currently running
    task</a>.</p>

    <p class=note><var>task</var> could be a <a href=#microtask id=event-loop-processing-model:microtask-2>microtask</a>.</p>
   <li><p>Let <var>task source</var> be <var>task</var>'s <a href=#concept-task-source id=event-loop-processing-model:concept-task-source>source</a>.<li><p>Let <var>old stack</var> be a copy of the <a id=event-loop-processing-model:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context
   stack</a>.<li><p>Empty the <a id=event-loop-processing-model:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li>
    <p><a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-4>Perform a microtask checkpoint</a>.</p>

    <p class=note>If <var>task</var> is a <a href=#microtask id=event-loop-processing-model:microtask-3>microtask</a> this step will be a no-op due to
    <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-5>performing a microtask checkpoint</a> being true.</p>
   <li>
    <p><a id=event-loop-processing-model:in-parallel-5 href=infrastructure.html#in-parallel>In parallel</a>:</p>

    <ol><li><p>Wait until the condition <var>goal</var> is met.<li>
      <p><a href=#queue-a-task id=event-loop-processing-model:queue-a-task>Queue a task</a> on <var>task source</var> to:</p>

      <ol><li><p>Replace the <a id=event-loop-processing-model:javascript-execution-context-stack-3 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> with <var>old
       stack</var>.<li>
        <p>Perform any steps that appear after this <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-2>spin the event loop</a> instance in the
        original algorithm.</p>

        <p class=note>This resumes <var>task</var>.</p>
       </ol>
     </ol>
   <li>
    <p>Stop <var>task</var>, allowing whatever algorithm that invoked it to resume.</p>

    <p class=note>This causes the <a href=#event-loop id=event-loop-processing-model:event-loop-24>event loop</a>'s main set of steps or the <a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-5>perform
    a microtask checkpoint</a> algorithm to continue.</p>
   </ol>

  <p class=note>Unlike other algorithms in this and other specifications, which behave similar to
  programming-language function calls, <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-3>spin the event loop</a> is more like a macro, which
  saves typing and indentation at the usage site by expanding into a series of steps and
  operations.</p>

  <div class=example>
   <p>An algorithm whose steps are:</p>

   <ol><li><p>Do something.<li><p><a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-4>Spin the event loop</a> until awesomeness happens.<li><p>Do something else.</ol>

   <p>is a shorthand which, after "macro expansion", becomes</p>

   <ol><li><p>Do something.<li><p>Let <var>old stack</var> be a copy of the <a id=event-loop-processing-model:javascript-execution-context-stack-4 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context
    stack</a>.<li><p>Empty the <a id=event-loop-processing-model:javascript-execution-context-stack-5 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li><p><a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-6>Perform a microtask checkpoint</a>.<li>
     <p><a id=event-loop-processing-model:in-parallel-6 href=infrastructure.html#in-parallel>In parallel</a>:</p>

     <ol><li><p>Wait until awesomeness happens.<li>
       <p><a href=#queue-a-task id=event-loop-processing-model:queue-a-task-2>Queue a task</a> on the task source in which "do something" was done to:</p>

       <ol><li><p>Replace the <a id=event-loop-processing-model:javascript-execution-context-stack-6 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> with <var>old
        stack</var>.<li><p>Do something else.</ol>
      </ol>
    </ol>
  </div>

  <div class=example>
   <p>Here is a more full example of the substitution, where the event loop is spun from inside a
   task that is queued from work in parallel. The version using <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-5>spin the event loop</a>:</p>

   <ol><li>
     <p><a id=event-loop-processing-model:in-parallel-7 href=infrastructure.html#in-parallel>In parallel</a>:</p>

     <ol><li><p>Do parallel thing 1.<li>
       <p><a href=#queue-a-task id=event-loop-processing-model:queue-a-task-3>Queue a task</a> on the <a href=#dom-manipulation-task-source id=event-loop-processing-model:dom-manipulation-task-source>DOM manipulation task source</a> to:</p>

       <ol><li><p>Do task thing 1.<li><p><a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-6>Spin the event loop</a> until awesomeness happens.<li><p>Do task thing 2.</ol>
      <li><p>Do parallel thing 2.</ol>
    </ol>

   <p>The fully expanded version:</p>

   <ol><li>
     <p><a id=event-loop-processing-model:in-parallel-8 href=infrastructure.html#in-parallel>In parallel</a>:</p>

     <ol><li><p>Do parallel thing 1.<li><p>Let <var>old stack</var> be null.<li>
       <p><a href=#queue-a-task id=event-loop-processing-model:queue-a-task-4>Queue a task</a> on the <a href=#dom-manipulation-task-source id=event-loop-processing-model:dom-manipulation-task-source-2>DOM manipulation task source</a> to:</p>

       <ol><li><p>Do task thing 1.<li><p>Set <var>old stack</var> to a copy of the <a id=event-loop-processing-model:javascript-execution-context-stack-7 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context
        stack</a>.<li><p>Empty the <a id=event-loop-processing-model:javascript-execution-context-stack-8 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li><p><a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-7>Perform a microtask checkpoint</a>.</ol>
      <li><p>Wait until awesomeness happens.<li>
       <p><a href=#queue-a-task id=event-loop-processing-model:queue-a-task-5>Queue a task</a> on the <a href=#dom-manipulation-task-source id=event-loop-processing-model:dom-manipulation-task-source-3>DOM manipulation task source</a> to:</p>

       <ol><li><p>Replace the <a id=event-loop-processing-model:javascript-execution-context-stack-9 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> with <var>old
        stack</var>.<li><p>Do task thing 2.</ol>
      <li><p>Do parallel thing 2.</ol>
    </ol>
  </div>

  <hr>

  <p>Some of the algorithms in this specification, for historical reasons, require the user agent to
  <dfn id=pause data-export="">pause</dfn> while running a <a href=#concept-task id=event-loop-processing-model:concept-task-7>task</a> until a condition
  <var>goal</var> is met. This means running the following steps:</p>

  <ol><li><p>Let <var>global</var> be the <a href=#current-global-object id=event-loop-processing-model:current-global-object>current global object</a>.<li><p>Let <var>timeBeforePause</var> be the <a id=event-loop-processing-model:current-high-resolution-time-2 href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given
   <var>global</var>.<li><p>If necessary, update the rendering or user interface of any <code id=event-loop-processing-model:document-7><a href=dom.html#document>Document</a></code> or
   <a id=event-loop-processing-model:navigable-8 href=document-sequences.html#navigable>navigable</a> to reflect the current state.<li><p>Wait until the condition <var>goal</var> is met. While a user agent has a paused
   <a href=#concept-task id=event-loop-processing-model:concept-task-8>task</a>, the corresponding <a href=#event-loop id=event-loop-processing-model:event-loop-25>event loop</a> must not run
   further <a href=#concept-task id=event-loop-processing-model:concept-task-9>tasks</a>, and any script in the currently running <a href=#concept-task id=event-loop-processing-model:concept-task-10>task</a> must block. User agents should remain responsive to user input
   while paused, however, albeit in a reduced capacity since the <a href=#event-loop id=event-loop-processing-model:event-loop-26>event loop</a> will not be
   doing anything.<li><p><a id=event-loop-processing-model:record-pause-duration href=https://w3c.github.io/long-animation-frames/#record-pause-duration data-x-internal=record-pause-duration>Record pause duration</a> given the <a id=event-loop-processing-model:duration-from href=https://w3c.github.io/hr-time/#dfn-duration-from data-x-internal=duration-from>duration from</a>
   <var>timeBeforePause</var> to the <a id=event-loop-processing-model:current-high-resolution-time-3 href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given
   <var>global</var>.</ol>

  <div class=warning>
   <p><a href=#pause id=event-loop-processing-model:pause>Pausing</a> is highly detrimental to the user experience, especially
   in scenarios where a single <a href=#event-loop id=event-loop-processing-model:event-loop-27>event loop</a> is shared among multiple documents. User
   agents are encouraged to experiment with alternatives to <a href=#pause id=event-loop-processing-model:pause-2>pausing</a>,
   such as <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-7>spinning the event loop</a> or even simply
   proceeding without any kind of suspended execution at all, insofar as it is possible to do so
   while preserving compatibility with existing content. This specification will happily change if
   a less-drastic alternative is discovered to be web-compatible.</p>

   <p>In the interim, implementers should be aware that the variety of alternatives that user agents
   might experiment with can change subtle aspects of <a href=#event-loop id=event-loop-processing-model:event-loop-28>event loop</a> behavior, including
   <a href=#concept-task id=event-loop-processing-model:concept-task-11>task</a> and <a href=#microtask id=event-loop-processing-model:microtask-4>microtask</a> timing. Implementations should
   continue experimenting even if doing so causes them to violate the exact semantics implied by the
   <a href=#pause id=event-loop-processing-model:pause-3>pause</a> operation.</p>
  </div>

  <h5 id=generic-task-sources><span class=secno>8.1.7.4</span> Generic task sources<a href=#generic-task-sources class=self-link></a></h5>

  <p>The following <a href=#task-source id=generic-task-sources:task-source>task sources</a> are used by a number of mostly
  unrelated features in this and other specifications.</p>

  <dl><dt>The <dfn id=dom-manipulation-task-source data-export="">DOM manipulation task source</dfn><dd>
    <p>This <a href=#task-source id=generic-task-sources:task-source-2>task source</a> is used for features that react to DOM manipulations, such as
    things that happen in a non-blocking fashion when an element is <a href=infrastructure.html#insert-an-element-into-a-document id=generic-task-sources:insert-an-element-into-a-document>inserted into the document</a>.</p>
   <dt>The <dfn id=user-interaction-task-source data-export="">user interaction task source</dfn><dd>
    <p>This <a href=#task-source id=generic-task-sources:task-source-3>task source</a> is used for features that react to user interaction, for
    example keyboard or mouse input.</p>

    <p>Events sent in response to user input (e.g., <code id=generic-task-sources:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> events)
    must be fired using <a href=#concept-task id=generic-task-sources:concept-task>tasks</a> <a href=#queue-a-task id=generic-task-sources:queue-a-task>queued</a> with the <a href=#user-interaction-task-source id=generic-task-sources:user-interaction-task-source>user interaction task source</a>. <a href=references.html#refsUIEVENTS>[UIEVENTS]</a></p>
    
   <dt>The <dfn id=networking-task-source data-export="">networking task source</dfn><dd>
    <p>This <a href=#task-source id=generic-task-sources:task-source-4>task source</a> is used for features that trigger in response to network
    activity.</p>
   <dt id=history-traversal-task-source>The <dfn id=navigation-and-traversal-task-source>navigation and traversal task source</dfn><dd>
    <p>This <a href=#task-source id=generic-task-sources:task-source-5>task source</a> is used to queue tasks involved in <a href=browsing-the-web.html#navigate id=generic-task-sources:navigate>navigation</a> and <a href=browsing-the-web.html#apply-the-traverse-history-step id=generic-task-sources:apply-the-traverse-history-step>history
    traversal</a>.</p>
   <dt>The <dfn id=rendering-task-source>rendering task source</dfn><dd>
    <p>This <a href=#task-source id=generic-task-sources:task-source-6>task source</a> is used solely to <a href=#update-the-rendering id=generic-task-sources:update-the-rendering>update the rendering</a>.</p>
   </dl>

  <h5 id=event-loop-for-spec-authors><span class=secno>8.1.7.5</span> Dealing with the event loop from other specifications<a href=#event-loop-for-spec-authors class=self-link></a></h5>

  <p>Writing specifications that correctly interact with the <a href=#event-loop id=event-loop-for-spec-authors:event-loop>event loop</a> can be tricky.
  This is compounded by how this specification uses concurrency-model-independent terminology, so we
  say things like "<a href=#event-loop id=event-loop-for-spec-authors:event-loop-2>event loop</a>" and "<a id=event-loop-for-spec-authors:in-parallel href=infrastructure.html#in-parallel>in parallel</a>" instead of using more
  familiar model-specific terms like "main thread" or "on a background thread".</p>

  <p>By default, specification text generally runs on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-3>event loop</a>. This falls out
  from the formal <a href=#event-loop-processing-model>event loop processing model</a>, in that
  you can eventually trace most algorithms back to a <a href=#concept-task id=event-loop-for-spec-authors:concept-task>task</a> <a href=#queue-a-task id=event-loop-for-spec-authors:queue-a-task>queued</a> there.</p>

  <p class=example>The algorithm steps for any JavaScript method will be invoked by author code
  calling that method. And author code can only be run via queued tasks, usually originating
  somewhere in the <a href=scripting.html#script-processing-model><code>script</code> processing model</a>.</p>

  <p>From this starting point, the overriding guideline is that any work a specification needs to
  perform that would otherwise block the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-4>event loop</a> must instead be performed <a id=event-loop-for-spec-authors:in-parallel-2 href=infrastructure.html#in-parallel>in
  parallel</a> with it. This includes (but is not limited to):</p>

  <ul><li><p>performing heavy computation;<li><p>displaying a user-facing prompt;<li><p>performing operations which could require involving outside systems (i.e. "going out of
   process").</ul>

  <p>The next complication is that, in algorithm sections that are <a id=event-loop-for-spec-authors:in-parallel-3 href=infrastructure.html#in-parallel>in parallel</a>, you
  must not create or manipulate objects associated to a specific <a id=event-loop-for-spec-authors:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>, <a href=#global-object id=event-loop-for-spec-authors:global-object>global</a>, or <a href=#environment-settings-object id=event-loop-for-spec-authors:environment-settings-object>environment settings object</a>. (Stated in more
  familiar terms, you must not directly access main-thread artifacts from a background thread.)
  Doing so would create data races observable to JavaScript code, since after all, your algorithm
  steps are running <em><a id=event-loop-for-spec-authors:in-parallel-4 href=infrastructure.html#in-parallel>in parallel</a></em> to the JavaScript code.</p>

  <p>By extension, you cannot access Web IDL's <a id=event-loop-for-spec-authors:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> value from steps running <a id=event-loop-for-spec-authors:in-parallel-5 href=infrastructure.html#in-parallel>in
  parallel</a>, even if those steps were activated by an algorithm that <em>does</em> have access
  to the <a id=event-loop-for-spec-authors:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> value.</p>

  <p>You can, however, manipulate specification-level data structures and values from
  <cite>Infra</cite>, as those are realm-agnostic. They are never directly exposed to JavaScript without
  a specific conversion taking place (often <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=event-loop-for-spec-authors:concept-idl-convert data-x-internal=concept-idl-convert>via Web IDL</a>).
  <a href=references.html#refsINFRA>[INFRA]</a> <a href=references.html#refsWEBIDL>[WEBIDL]</a></p>

  <p>To affect the world of observable JavaScript objects, then, you must <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task>queue a global
  task</a> to perform any such manipulations. This ensures your steps are properly interleaved
  with respect to other things happening on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-5>event loop</a>. Furthermore, you must
  choose a <a href=#task-source id=event-loop-for-spec-authors:task-source>task source</a> when <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-2>queuing a global
  task</a>; this governs the relative order of your steps versus others. If you are unsure which
  <a href=#task-source id=event-loop-for-spec-authors:task-source-2>task source</a> to use, pick one of the <a href=#generic-task-sources>generic task
  sources</a> that sounds most applicable. Finally, you must indicate which <a href=#global-object id=event-loop-for-spec-authors:global-object-2>global
  object</a> your queued task is associated with; this ensures that if that global object is
  inactive, the task does not run.</p>

  <p class=note>The base primitive, on which <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-3>queue a global task</a> builds, is the
  <a href=#queue-a-task id=event-loop-for-spec-authors:queue-a-task-2>queue a task</a> algorithm. In general, <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-4>queue a global task</a> is better
  because it automatically picks the right <a href=#event-loop id=event-loop-for-spec-authors:event-loop-6>event loop</a> and, where appropriate, <a href=#concept-task-document id=event-loop-for-spec-authors:concept-task-document>document</a>. Older specifications often use <a href=#queue-a-task id=event-loop-for-spec-authors:queue-a-task-3>queue a
  task</a> combined with the <a href=#implied-event-loop id=event-loop-for-spec-authors:implied-event-loop>implied event loop</a> and <a href=#implied-document id=event-loop-for-spec-authors:implied-document>implied document</a>
  concepts, but this is discouraged.</p>

  <p>Putting this all together, we can provide a template for a typical algorithm that needs to do
  work asynchronously:</p>

  <ol><li><p>Do any synchronous setup work, while still on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-7>event loop</a>. This may
   include converting <a id=event-loop-for-spec-authors:realm-2 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>-specific JavaScript values into realm-agnostic
   specification-level values.<li><p>Perform a set of potentially-expensive steps <a id=event-loop-for-spec-authors:in-parallel-6 href=infrastructure.html#in-parallel>in parallel</a>, operating entirely
   on realm-agnostic values, and producing a realm-agnostic result.<li><p><a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-5>Queue a global task</a>, on a specified <a href=#task-source id=event-loop-for-spec-authors:task-source-3>task source</a> and given an
   appropriate <a href=#global-object id=event-loop-for-spec-authors:global-object-3>global object</a>, to convert the realm-agnostic result back into observable
   effects on the observable world of JavaScript objects on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-8>event loop</a>.</ol>

  <div id=example-event-loop-using-algorithm class=example><a href=#example-event-loop-using-algorithm class=self-link></a>

   <p>The following is an algorithm that "encrypts" a passed-in <a id=event-loop-for-spec-authors:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=https://infra.spec.whatwg.org/#scalar-value-string id=event-loop-for-spec-authors:scalar-value-string data-x-internal=scalar-value-string>scalar value strings</a> <var>input</var>, after parsing them as
   URLs:</p>

   <ol><li><p>Let <var>urls</var> be an empty <a id=event-loop-for-spec-authors:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li>
     <p><a href=https://infra.spec.whatwg.org/#list-iterate id=event-loop-for-spec-authors:list-iterate data-x-internal=list-iterate>For each</a> <var>string</var> of <var>input</var>:</p>

     <ol><li><p>Let <var>parsed</var> be the result of <a id=event-loop-for-spec-authors:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
      <var>string</var>, relative to the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object>current settings object</a>.<li><p>If <var>parsed</var> is failure, then return <a id=event-loop-for-spec-authors:a-promise-rejected-with href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> a
      <a id=event-loop-for-spec-authors:syntaxerror href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a> <code id=event-loop-for-spec-authors:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>serialized</var> be the result of applying the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=event-loop-for-spec-authors:concept-url-serializer data-x-internal=concept-url-serializer>URL serializer</a> to <var>parsed</var>.<li><p><a href=https://infra.spec.whatwg.org/#list-append id=event-loop-for-spec-authors:list-append data-x-internal=list-append>Append</a> <var>serialized</var> to <var>urls</var>.</ol>
    <li><p>Let <var>realm</var> be the <a id=event-loop-for-spec-authors:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>.<li><p>Let <var>p</var> be a new promise.<li>
     <p>Run the following steps <a id=event-loop-for-spec-authors:in-parallel-7 href=infrastructure.html#in-parallel>in parallel</a>:</p>

     <ol><li><p>Let <var>encryptedURLs</var> be an empty <a id=event-loop-for-spec-authors:list-3 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li>
       <p><a href=https://infra.spec.whatwg.org/#list-iterate id=event-loop-for-spec-authors:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>url</var> of <var>urls</var>:</p>

       <ol><li><p>Wait 100 milliseconds, so that people think we're doing heavy-duty encryption.<li><p>Let <var>encrypted</var> be a new <a id=event-loop-for-spec-authors:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> derived from <var>url</var>,
        whose <var>n</var>th <a id=event-loop-for-spec-authors:code-unit href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> is equal to <var>url</var>'s <var>n</var>th
        <a id=event-loop-for-spec-authors:code-unit-2 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> plus 13.<li><p><a href=https://infra.spec.whatwg.org/#list-append id=event-loop-for-spec-authors:list-append-2 data-x-internal=list-append>Append</a> <var>encrypted</var> to
        <var>encryptedURLs</var>.</p>
       </ol>
      <li>
       <p><a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-6>Queue a global task</a> on the <a href=#networking-task-source id=event-loop-for-spec-authors:networking-task-source>networking task source</a>, given
       <var>realm</var>'s <a href=#concept-realm-global id=event-loop-for-spec-authors:concept-realm-global>global object</a>, to perform the
       following steps:</p>

       <ol><li><p>Let <var>array</var> be the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=event-loop-for-spec-authors:concept-idl-convert-2 data-x-internal=concept-idl-convert>converting</a> <var>encryptedURLs</var> to a JavaScript
        array, in <var>realm</var>.<li><p>Resolve <var>p</var> with <var>array</var>.</ol>
      </ol>
    <li><p>Return <var>p</var>.</ol>

   <p>Here are several things to notice about this algorithm:</p>

   <ul><li><p>It does its URL parsing up front, on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-9>event loop</a>, before going to the
    <a id=event-loop-for-spec-authors:in-parallel-8 href=infrastructure.html#in-parallel>in parallel</a> steps. This is necessary, since parsing depends on the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object-2>current
    settings object</a>, which would no longer be current after going <a id=event-loop-for-spec-authors:in-parallel-9 href=infrastructure.html#in-parallel>in
    parallel</a>.<li><p>Alternately, it could have saved a reference to the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object-3>current settings
    object</a>'s <a href=#api-base-url id=event-loop-for-spec-authors:api-base-url>API base URL</a> and used it during the <a id=event-loop-for-spec-authors:in-parallel-10 href=infrastructure.html#in-parallel>in parallel</a> steps;
    that would have been equivalent. However, we recommend instead doing as much work as possible up
    front, as this example does. Attempting to save the correct values can be error prone; for
    example, if we'd saved just the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object-4>current settings object</a>, instead of its <a href=#api-base-url id=event-loop-for-spec-authors:api-base-url-2>API
    base URL</a>, there would have been a potential race.<li><p>It implicitly passes a <a id=event-loop-for-spec-authors:list-4 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=https://infra.spec.whatwg.org/#string id=event-loop-for-spec-authors:string-2 data-x-internal=string>strings</a> from the
    initial steps to the <a id=event-loop-for-spec-authors:in-parallel-11 href=infrastructure.html#in-parallel>in parallel</a> steps. This is OK, as both <a href=https://infra.spec.whatwg.org/#list id=event-loop-for-spec-authors:list-5 data-x-internal=list>lists</a> and <a href=https://infra.spec.whatwg.org/#string id=event-loop-for-spec-authors:string-3 data-x-internal=string>strings</a> are
    <a id=event-loop-for-spec-authors:realm-3 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>-agnostic.<li><p>It performs "expensive computation" (waiting for 100 milliseconds per input URL) during
    the <a id=event-loop-for-spec-authors:in-parallel-12 href=infrastructure.html#in-parallel>in parallel</a> steps, thus not blocking the main <a href=#event-loop id=event-loop-for-spec-authors:event-loop-10>event loop</a>.<li><p>Promises, as observable JavaScript objects, are never created and manipulated during the
    <a id=event-loop-for-spec-authors:in-parallel-13 href=infrastructure.html#in-parallel>in parallel</a> steps. <var>p</var> is created before entering those steps, and then is
    manipulated during a <a href=#concept-task id=event-loop-for-spec-authors:concept-task-2>task</a> that is <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-7>queued</a> specifically for that purpose.<li><p>The creation of a JavaScript array object also happens during the queued task, and is
    careful to specify which realm it creates the array in since that is no longer obvious from
    context.</ul>

   <p>(On these last two points, see also <a href=https://github.com/whatwg/webidl/issues/135>whatwg/webidl issue #135</a> and <a href=https://github.com/whatwg/webidl/issues/371>whatwg/webidl issue #371</a>, where we are
   still mulling over the subtleties of the above promise-resolution pattern.)</p>

   <p>Another thing to note is that, in the event this algorithm was called from a Web IDL-specified
   operation taking a <code>sequence</code>&lt;<code id=event-loop-for-spec-authors:idl-usvstring><a data-x-internal=idl-usvstring href=https://webidl.spec.whatwg.org/#idl-USVString>USVString</a></code>>, there was an automatic conversion from
   <a id=event-loop-for-spec-authors:realm-4 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>-specific JavaScript objects provided by the author as input, into the
   realm-agnostic <code>sequence</code>&lt;<code id=event-loop-for-spec-authors:idl-usvstring-2><a data-x-internal=idl-usvstring href=https://webidl.spec.whatwg.org/#idl-USVString>USVString</a></code>>
   Web IDL type, which we then treat as a <a id=event-loop-for-spec-authors:list-6 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=https://infra.spec.whatwg.org/#scalar-value-string id=event-loop-for-spec-authors:scalar-value-string-2 data-x-internal=scalar-value-string>scalar value strings</a>. So depending on how your specification is structured, there
   may be other implicit steps happening on the main <a href=#event-loop id=event-loop-for-spec-authors:event-loop-11>event loop</a> that play a part in
   this whole process of getting you ready to go <a id=event-loop-for-spec-authors:in-parallel-14 href=infrastructure.html#in-parallel>in parallel</a>.</p>

  </div>


  

  <h4 id=events><span class=secno>8.1.8</span> Events<a href=#events class=self-link></a></h4>

  <h5 id=event-handler-attributes><span class=secno>8.1.8.1</span> Event handlers<a href=#event-handler-attributes class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers title="Events are signals fired inside the browser window that notify of changes in the browser or operating system environment. Programmers can create event handler code that will run when an event fires, allowing web pages to respond appropriately to change.">Events/Event_handlers</a></div></div>

  <p>Many objects can have <dfn id=event-handlers data-lt="event handler" data-export="">event handlers</dfn> specified. These
  act as non-capture <a href=https://dom.spec.whatwg.org/#concept-event-listener id=event-handler-attributes:event-listener data-x-internal=event-listener>event listeners</a> for the object on which
  they are specified. <a href=references.html#refsDOM>[DOM]</a></p>

  

  <p>An <a href=#event-handlers id=event-handler-attributes:event-handlers>event handler</a> is a <a id=event-handler-attributes:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with two <a href=https://infra.spec.whatwg.org/#struct-item id=event-handler-attributes:struct-item data-x-internal=struct-item>items</a>:</p>

  <ul><li><p>a <dfn data-dfn-for="event handler" id=event-handler-value data-export="">value</dfn>, which is
   either null, a callback object, or an
   <a href=#internal-raw-uncompiled-handler id=event-handler-attributes:internal-raw-uncompiled-handler>internal raw uncompiled handler</a>. The <code id=event-handler-attributes:eventhandler><a href=#eventhandler>EventHandler</a></code> callback
   function type describes how this is exposed to scripts. Initially, an <a href=#event-handlers id=event-handler-attributes:event-handlers-2>event handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value>value</a>
   must be set to null.<li><p>a <dfn data-dfn-for="event handler" id=event-handler-listener data-export="">listener</dfn>, which
   is either null or an <a id=event-handler-attributes:event-listener-2 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> responsible for running <a href=#the-event-handler-processing-algorithm id=event-handler-attributes:the-event-handler-processing-algorithm>the
   event handler processing algorithm</a>. Initially, an <a href=#event-handlers id=event-handler-attributes:event-handlers-3>event handler</a>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener>listener</a> must be set to null.</ul>

  

  <p>Event handlers are exposed in two ways.</p>

  <p>The first way, common to all event handlers, is as an <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes>event handler IDL attribute</a>.</p>

  <p>The second way is as an <a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes>event handler content
  attribute</a>. Event handlers on <a id=event-handler-attributes:html-elements href=infrastructure.html#html-elements>HTML elements</a> and some of the event handlers on
  <code id=event-handler-attributes:window><a href=nav-history-apis.html#window>Window</a></code> objects are exposed in this way.</p>

  <p>For both of these two ways, the <a href=#event-handlers id=event-handler-attributes:event-handlers-4>event handler</a> is exposed
  through a <dfn id=event-handler-name>name</dfn>, which is a string that always starts with
  "<code>on</code>" and is followed by the name of the event for which the handler is
  intended.</p>

  <hr>

  <p>Most of the time, the object that exposes an <a href=#event-handlers id=event-handler-attributes:event-handlers-5>event handler</a>
  is the same as the object on which the corresponding <a id=event-handler-attributes:event-listener-3 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> is added.
  However, the <code id=event-handler-attributes:the-body-element><a href=sections.html#the-body-element>body</a></code> and <code id=event-handler-attributes:frameset><a href=obsolete.html#frameset>frameset</a></code> elements expose several <a href=#event-handlers id=event-handler-attributes:event-handlers-6>event
  handlers</a> that act upon the element's <code id=event-handler-attributes:window-2><a href=nav-history-apis.html#window>Window</a></code> object, if one exists. In either
  case, we call the object an <a href=#event-handlers id=event-handler-attributes:event-handlers-7>event handler</a> acts upon the <dfn id=event-handler-target>target</dfn> of that <a href=#event-handlers id=event-handler-attributes:event-handlers-8>event
  handler</a>.</p>

  

  <p>To <dfn id=determining-the-target-of-an-event-handler>determine the target of an event
  handler</dfn>, given an <code id=event-handler-attributes:eventtarget><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object <var>eventTarget</var> on which the <a href=#event-handlers id=event-handler-attributes:event-handlers-9>event handler</a> is exposed, and an <a href=#event-handler-name id=event-handler-attributes:event-handler-name>event handler name</a>
  <var>name</var>, the following steps are taken:</p>

  <ol><li><p>If <var>eventTarget</var> is not a <code id=event-handler-attributes:the-body-element-2><a href=sections.html#the-body-element>body</a></code> element or a <code id=event-handler-attributes:frameset-2><a href=obsolete.html#frameset>frameset</a></code>
   element, then return <var>eventTarget</var>.<li><p>If <var>name</var> is not the name of an attribute member of the
   <code id=event-handler-attributes:windoweventhandlers><a href=#windoweventhandlers>WindowEventHandlers</a></code> interface mixin and the <a href=#window-reflecting-body-element-event-handler-set id=event-handler-attributes:window-reflecting-body-element-event-handler-set><code>Window</code>-reflecting
   body element event handler set</a> does not <a href=https://infra.spec.whatwg.org/#list-contain id=event-handler-attributes:list-contains data-x-internal=list-contains>contain</a>
   <var>name</var>, then return <var>eventTarget</var>.<li>
    <p>If <var>eventTarget</var>'s <a id=event-handler-attributes:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not an <a id=event-handler-attributes:active-document href=document-sequences.html#active-document>active
    document</a>, then return null.</p>

    <p class=note>This could happen if this object is a <code id=event-handler-attributes:the-body-element-3><a href=sections.html#the-body-element>body</a></code> element without
    a corresponding <code id=event-handler-attributes:window-3><a href=nav-history-apis.html#window>Window</a></code> object, for example.</p>

    <p class=note>This check does not necessarily prevent <code id=event-handler-attributes:the-body-element-4><a href=sections.html#the-body-element>body</a></code> and
    <code id=event-handler-attributes:frameset-3><a href=obsolete.html#frameset>frameset</a></code> elements that are not <a id=event-handler-attributes:the-body-element-2-2 href=dom.html#the-body-element-2>the body element</a> of their <a id=event-handler-attributes:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
    document</a> from reaching the next step. In particular, a <code id=event-handler-attributes:the-body-element-5><a href=sections.html#the-body-element>body</a></code> element created
    in an <a id=event-handler-attributes:active-document-2 href=document-sequences.html#active-document>active document</a> (perhaps with <code id=event-handler-attributes:dom-document-createelement><a data-x-internal=dom-document-createelement href=https://dom.spec.whatwg.org/#dom-document-createelement>document.createElement()</a></code>) but not
    <a id=event-handler-attributes:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a> will also have its corresponding <code id=event-handler-attributes:window-4><a href=nav-history-apis.html#window>Window</a></code> object as the <a href=#event-handler-target id=event-handler-attributes:event-handler-target>target</a> of several <a href=#event-handlers id=event-handler-attributes:event-handlers-10>event handlers</a> exposed
    through it.</p>
   <li><p>Return <var>eventTarget</var>'s <a id=event-handler-attributes:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=#concept-relevant-global id=event-handler-attributes:concept-relevant-global>relevant global
   object</a>.</ol>

  <hr>

  <p>Each <code id=event-handler-attributes:eventtarget-2><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object that has one or more <a href=#event-handlers id=event-handler-attributes:event-handlers-11>event handlers</a> specified
  has an associated <dfn data-dfn-for=EventTarget id=event-handler-map data-export="">event handler map</dfn>, which is a <a href=https://infra.spec.whatwg.org/#ordered-map id=event-handler-attributes:ordered-map data-x-internal=ordered-map>map</a> of strings representing <a href=#event-handler-name id=event-handler-attributes:event-handler-name-2>names</a> of <a href=#event-handlers id=event-handler-attributes:event-handlers-12>event handlers</a> to <a href=#event-handlers id=event-handler-attributes:event-handlers-13>event handlers</a>.</p>

  <p>When an <code id=event-handler-attributes:eventtarget-3><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object that has one or more <a href=#event-handlers id=event-handler-attributes:event-handlers-14>event handlers</a>
  specified is created, its <a href=#event-handler-map id=event-handler-attributes:event-handler-map>event handler map</a> must be initialized such that it contains
  an <a href=https://infra.spec.whatwg.org/#map-entry id=event-handler-attributes:map-entry data-x-internal=map-entry>entry</a> for each <a href=#event-handlers id=event-handler-attributes:event-handlers-15>event
  handler</a> that has that object as <a href=#event-handler-target id=event-handler-attributes:event-handler-target-2>target</a>, with
  <a href=https://infra.spec.whatwg.org/#struct-item id=event-handler-attributes:struct-item-2 data-x-internal=struct-item>items</a> in those <a href=#event-handlers id=event-handler-attributes:event-handlers-16>event handlers</a> set to their initial
  values.</p>

  <p class=note>The order of the <a href=https://infra.spec.whatwg.org/#map-entry id=event-handler-attributes:map-entry-2 data-x-internal=map-entry>entries</a> of <a href=#event-handler-map id=event-handler-attributes:event-handler-map-2>event handler
  map</a> could be arbitrary. It is not observable through any algorithms that operate on the
  map.</p>

  <p class=note><a href=https://infra.spec.whatwg.org/#map-entry id=event-handler-attributes:map-entry-3 data-x-internal=map-entry>Entries</a> are not created in the <a href=#event-handler-map id=event-handler-attributes:event-handler-map-3>event handler
  map</a> of an object for <a href=#event-handlers id=event-handler-attributes:event-handlers-17>event handlers</a> that are merely exposed on that object,
  but have some other object as their <a href=#event-handler-target id=event-handler-attributes:event-handler-target-3>targets</a>.</p>

  

  <hr>

  <p>An <dfn id=event-handler-idl-attributes data-export="">event handler IDL attribute</dfn> is an
  IDL attribute for a specific <a href=#event-handlers id=event-handler-attributes:event-handlers-18>event handler</a>. The name of the
  IDL attribute is the same as the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-3>name</a> of the <a href=#event-handlers id=event-handler-attributes:event-handlers-19>event handler</a>.</p>

  

  <p>The getter of an <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-2>event handler IDL attribute</a>
  with name <var>name</var>, when called, must run these steps:</p>

  <ol><li><p>Let <var>eventTarget</var> be the result of <a href=#determining-the-target-of-an-event-handler id=event-handler-attributes:determining-the-target-of-an-event-handler>determining the target of an event
   handler</a> given this object and <var>name</var>.<li><p>If <var>eventTarget</var> is null, then return null.<li><p>Return the result of <a href=#getting-the-current-value-of-the-event-handler id=event-handler-attributes:getting-the-current-value-of-the-event-handler>getting the current value of the event handler</a> given
   <var>eventTarget</var> and <var>name</var>.</p>
  </ol>

  <p>The setter of an <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-3>event handler IDL attribute</a>
  with name <var>name</var>, when called, must run these steps:</p>

  <ol><li><p>Let <var>eventTarget</var> be the result of <a href=#determining-the-target-of-an-event-handler id=event-handler-attributes:determining-the-target-of-an-event-handler-2>determining the target of an event
   handler</a> given this object and <var>name</var>.<li><p>If <var>eventTarget</var> is null, then return.<li><p>If the given value is null, then <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler>deactivate an event handler</a> given
   <var>eventTarget</var> and <var>name</var>.<li>
    <p>Otherwise:</p>

    <ol><li><p>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-4>event handler
     map</a>.<li><p>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li><p>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-2>value</a> to the
     given value.<li><p><a href=#activate-an-event-handler id=event-handler-attributes:activate-an-event-handler>Activate an event handler</a> given <var>eventTarget</var> and
     <var>name</var>.</ol>
   </ol>

  <p class=note>Certain <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-4>event handler IDL attributes</a> have additional requirements, in
  particular the <code id=event-handler-attributes:handler-messageeventtarget-onmessage><a href=web-messaging.html#handler-messageeventtarget-onmessage>onmessage</a></code> attribute of
  <code id=event-handler-attributes:messageport><a href=web-messaging.html#messageport>MessagePort</a></code> objects.</p>

  

  <hr>

  <p>An <dfn id=event-handler-content-attributes data-export="">event handler content attribute</dfn>
  is a content attribute for a specific <a href=#event-handlers id=event-handler-attributes:event-handlers-20>event handler</a>. The name
  of the content attribute is the same as the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-4>name</a> of the
  <a href=#event-handlers id=event-handler-attributes:event-handlers-21>event handler</a>.</p>

  <p><a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes-2>Event handler content attributes</a>, when specified, must contain valid JavaScript
  code which, when parsed, would match the <i id=event-handler-attributes:js-prod-functionbody><a data-x-internal=js-prod-functionbody href=https://tc39.es/ecma262/#prod-FunctionBody>FunctionBody</a></i>
  production after <a id=event-handler-attributes:automatic-semicolon-insertion href=https://tc39.es/ecma262/#sec-automatic-semicolon-insertion data-x-internal=automatic-semicolon-insertion>automatic semicolon insertion</a>.</p>

  

  <p>The following <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=event-handler-attributes:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change
  steps</a> are used to synchronize between <a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes-3>event handler content attributes</a> and
  <a href=#event-handlers id=event-handler-attributes:event-handlers-22>event handlers</a>: <a href=references.html#refsDOM>[DOM]</a></p>

  <ol><li><p>If <var>namespace</var> is not null, or <var>localName</var> is not the name of an <a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes-4>event handler content attribute</a> on
   <var>element</var>, then return.<li><p>Let <var>eventTarget</var> be the result of <a href=#determining-the-target-of-an-event-handler id=event-handler-attributes:determining-the-target-of-an-event-handler-3>determining the target of an event
   handler</a> given <var>element</var> and <var>localName</var>.<li><p>If <var>eventTarget</var> is null, then return.<li><p>If <var>value</var> is null, then <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-2>deactivate an event handler</a> given
   <var>eventTarget</var> and <var>localName</var>.<li>
    <p>Otherwise:</p>

    <ol><li><p>If the <a id="event-handler-attributes:should-element's-inline-behavior-be-blocked-by-content-security-policy" href=https://w3c.github.io/webappsec-csp/#should-block-inline data-x-internal="should-element's-inline-behavior-be-blocked-by-content-security-policy">Should element's inline behavior be blocked by Content Security
     Policy?</a> algorithm returns "<code>Blocked</code>" when executed upon
     <var>element</var>, "<code>script attribute</code>", and <var>value</var>, then
     return. <a href=references.html#refsCSP>[CSP]</a><li><p>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-5>event handler
     map</a>.<li><p>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>localName</var>].<li><p>Let <var>location</var> be the script location that triggered the execution of these
     steps.<li><p>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-3>value</a> to the
     <a href=#internal-raw-uncompiled-handler id=event-handler-attributes:internal-raw-uncompiled-handler-2>internal raw uncompiled handler</a> <var>value</var>/<var>location</var>.<li><p><a href=#activate-an-event-handler id=event-handler-attributes:activate-an-event-handler-2>Activate an event handler</a> given <var>eventTarget</var> and
     <var>localName</var>.</ol>
   </ol>

  <p class=note>Per the DOM Standard, these steps are run even if <var>oldValue</var> and
  <var>value</var> are identical (setting an attribute to its current value), but <em>not</em> if
  <var>oldValue</var> and <var>value</var> are both null (removing an attribute that doesn't
  currently exist). <a href=references.html#refsDOM>[DOM]</a></p>

  <hr>

  <p>To <dfn id=deactivate-an-event-handler>deactivate an event handler</dfn> given an <code id=event-handler-attributes:eventtarget-4><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object
  <var>eventTarget</var> and a string <var>name</var> that is the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-5>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-23>event handler</a>, run these steps:</p>

  <ol><li><p>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-6>event handler
   map</a>.<li><p>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li><p>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-4>value</a> to
   null.<li><p>Let <var>listener</var> be <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-2>listener</a>.<li><p>If <var>listener</var> is not null, then <a id=event-handler-attributes:remove-an-event-listener href=https://dom.spec.whatwg.org/#remove-an-event-listener data-x-internal=remove-an-event-listener>remove an event listener</a> with
   <var>eventTarget</var> and <var>listener</var>.<li><p>Set <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-3>listener</a> to
   null.</ol>

  <p>To <dfn id=erase-all-event-listeners-and-handlers>erase all event listeners and handlers</dfn> given an <code id=event-handler-attributes:eventtarget-5><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object
  <var>eventTarget</var>, run these steps:</p>

  <ol><li><p>If <var>eventTarget</var> has an associated <a href=#event-handler-map id=event-handler-attributes:event-handler-map-7>event handler map</a>, then for each
   <var>name</var> → <var>eventHandler</var> of <var>eventTarget</var>'s associated <a href=#event-handler-map id=event-handler-attributes:event-handler-map-8>event
   handler map</a>, <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-3>deactivate an event handler</a> given <var>eventTarget</var> and
   <var>name</var>.<li><p><a id=event-handler-attributes:remove-all-event-listeners href=https://dom.spec.whatwg.org/#remove-all-event-listeners data-x-internal=remove-all-event-listeners>Remove all event listeners</a> given <var>eventTarget</var>.</ol>

  <p class=note>This algorithm is used to define <code id=event-handler-attributes:dom-document-open><a href=dynamic-markup-insertion.html#dom-document-open>document.open()</a></code>.</p>

  <p>To <dfn id=activate-an-event-handler>activate an event handler</dfn> given an <code id=event-handler-attributes:eventtarget-6><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object
  <var>eventTarget</var> and a string <var>name</var> that is the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-6>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-24>event handler</a>, run these steps:</p>

  <ol><li><p>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-9>event handler
   map</a>.<li><p>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li><p>If <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-4>listener</a> is not
   null, then return.<li>
    <p>Let <var>callback</var> be the result of creating a Web IDL <code id=event-handler-attributes:dom-eventlistener><a data-x-internal=dom-eventlistener href=https://dom.spec.whatwg.org/#callbackdef-eventlistener>EventListener</a></code> instance representing a reference to a function
    of one argument that executes the steps of <a href=#the-event-handler-processing-algorithm id=event-handler-attributes:the-event-handler-processing-algorithm-2>the event handler processing algorithm</a>,
    given <var>eventTarget</var>, <var>name</var>, and its argument.</p>

    <p>The <code id=event-handler-attributes:dom-eventlistener-2><a data-x-internal=dom-eventlistener href=https://dom.spec.whatwg.org/#callbackdef-eventlistener>EventListener</a></code>'s <a id=event-handler-attributes:callback-context href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a> can
    be arbitrary; it does not impact the steps of <a href=#the-event-handler-processing-algorithm id=event-handler-attributes:the-event-handler-processing-algorithm-3>the event handler processing
    algorithm</a>. <a href=references.html#refsDOM>[DOM]</a></p>

    <p class=note>The callback is emphatically <em>not</em> the <a href=#event-handlers id=event-handler-attributes:event-handlers-25>event handler</a> itself. Every event handler ends up registering the same
    callback, the algorithm defined below, which takes care of invoking the right code, and
    processing the code's return value.</p>
   <li>
    <p>Let <var>listener</var> be a new <a id=event-handler-attributes:event-listener-4 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> whose <a href=https://dom.spec.whatwg.org/#event-listener-type id=event-handler-attributes:event-listener-type data-x-internal=event-listener-type>type</a> is the <dfn id=event-handler-event-type data-export="">event handler event type</dfn> corresponding to
    <var>eventHandler</var> and <a href=https://dom.spec.whatwg.org/#event-listener-callback id=event-handler-attributes:event-listener-callback data-x-internal=event-listener-callback>callback</a> is
    <var>callback</var>.</p>

    <p class=note>To be clear, an <a id=event-handler-attributes:event-listener-5 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> is different from an <code id=event-handler-attributes:dom-eventlistener-3><a data-x-internal=dom-eventlistener href=https://dom.spec.whatwg.org/#callbackdef-eventlistener>EventListener</a></code>.</p>
   <li><p><a id=event-handler-attributes:add-an-event-listener href=https://dom.spec.whatwg.org/#add-an-event-listener data-x-internal=add-an-event-listener>Add an event listener</a> with <var>eventTarget</var> and
   <var>listener</var>.<li><p>Set <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-5>listener</a> to
   <var>listener</var>.</ol>

  <div class=note>
   <p>The event listener registration happens only if the <a href=#event-handlers id=event-handler-attributes:event-handlers-26>event
   handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-5>value</a> is being set to non-null, and
   the <a href=#event-handlers id=event-handler-attributes:event-handlers-27>event handler</a> is not already activated. Since listeners
   are called in the order they were registered, assuming no <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-4>deactivation</a> occurred, the order of event listeners for a particular event type
   will always be:</p>

   <ol><li><p>the event listeners registered with <code id=event-handler-attributes:dom-eventtarget-addeventlistener><a data-x-internal=dom-eventtarget-addeventlistener href=https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener>addEventListener()</a></code> before the first time the
    <a href=#event-handlers id=event-handler-attributes:event-handlers-28>event handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-6>value</a> was set to non-null<li><p>then the callback to which it is currently set, if any<li><p>and finally the event listeners registered with <code id=event-handler-attributes:dom-eventtarget-addeventlistener-2><a data-x-internal=dom-eventtarget-addeventlistener href=https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener>addEventListener()</a></code> <em>after</em> the first
    time the <a href=#event-handlers id=event-handler-attributes:event-handlers-29>event handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-7>value</a> was set to non-null.</ol>
  </div>

  

  <div class=example>

   <p>This example demonstrates the order in which event listeners are invoked. If the button in
   this example is clicked by the user, the page will show four alerts, with the text "ONE", "TWO",
   "THREE", and "FOUR" respectively.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;test&quot;</c-><c- p>&gt;</c->Start Demo<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> button <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;test&apos;</c-><c- p>);</c->
 button<c- p>.</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;ONE&apos;</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c->
 button<c- p>.</c->setAttribute<c- p>(</c-><c- t>&apos;onclick&apos;</c-><c- p>,</c-> <c- u>&quot;alert(&apos;NOT CALLED&apos;)&quot;</c-><c- p>);</c-> <c- c1>// event handler listener is registered here</c->
 button<c- p>.</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;THREE&apos;</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c->
 button<c- p>.</c->onclick <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;TWO&apos;</c-><c- p>);</c-> <c- p>};</c->
 button<c- p>.</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;FOUR&apos;</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>However, in the following example, the event handler is <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-5>deactivated</a> after its initial activation (and its event listener is removed),
   before being reactivated at a later time. The page will show five alerts with "ONE", "TWO",
   "THREE", "FOUR", and "FIVE" respectively, in order.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;test&quot;</c-><c- p>&gt;</c->Start Demo<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> button <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;test&apos;</c-><c- p>);</c->
 button<c- p>.</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;ONE&apos;</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c->
 button<c- p>.</c->setAttribute<c- p>(</c-><c- t>&apos;onclick&apos;</c-><c- p>,</c-> <c- u>&quot;alert(&apos;NOT CALLED&apos;)&quot;</c-><c- p>);</c-> <c- c1>// event handler is activated here</c->
 button<c- p>.</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;TWO&apos;</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c->
 button<c- p>.</c->onclick <c- o>=</c-> <c- kc>null</c-><c- p>;</c->                                 <c- c1>// but deactivated here</c->
 button<c- p>.</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;THREE&apos;</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c->
 button<c- p>.</c->onclick <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;FOUR&apos;</c-><c- p>);</c-> <c- p>};</c->       <c- c1>// and re-activated here</c->
 button<c- p>.</c->addEventListener<c- p>(</c-><c- t>&apos;click&apos;</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>&apos;FIVE&apos;</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <p class=note>The interfaces implemented by the event object do not influence whether an <a href=#event-handlers id=event-handler-attributes:event-handlers-30>event handler</a> is triggered or not.</p>

  <p><dfn id=the-event-handler-processing-algorithm>The event handler processing algorithm</dfn> for an <code id=event-handler-attributes:eventtarget-7><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object
  <var>eventTarget</var>, a string <var>name</var> representing the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-7>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-31>event handler</a>, and an
  <code id=event-handler-attributes:event><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code> object <var>event</var> is as follows:</p>

  <ol><li><p>Let <var>callback</var> be the result of <a href=#getting-the-current-value-of-the-event-handler id=event-handler-attributes:getting-the-current-value-of-the-event-handler-2>getting the current value of the event
   handler</a> given <var>eventTarget</var> and <var>name</var>.<li><p>If <var>callback</var> is null, then return.<li><p>Let <var>special error event handling</var> be true if <var>event</var> is an
   <code id=event-handler-attributes:errorevent><a href=#errorevent>ErrorEvent</a></code> object, <var>event</var>'s <code id=event-handler-attributes:dom-event-type><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is
   "<code id=event-handler-attributes:event-error><a href=indices.html#event-error>error</a></code>", and <var>event</var>'s <code id=event-handler-attributes:dom-event-currenttarget><a data-x-internal=dom-event-currenttarget href=https://dom.spec.whatwg.org/#dom-event-currenttarget>currentTarget</a></code> implements the
   <code id=event-handler-attributes:windoworworkerglobalscope><a href=#windoworworkerglobalscope>WindowOrWorkerGlobalScope</a></code> mixin. Otherwise, let <var>special error event
   handling</var> be false.<li>
    <p>Process the <code id=event-handler-attributes:event-2><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code> object <var>event</var> as follows:</p>

    <dl class=switch><dt>If <var>special error event handling</var> is true<dd>
      <p>Let <var>return value</var> be the result of <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=event-handler-attributes:es-invoking-callback-functions data-x-internal=es-invoking-callback-functions>invoking</a> <var>callback</var> with «
      <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-message><a href=#dom-errorevent-message>message</a></code>, <var>event</var>'s
      <code id=event-handler-attributes:dom-errorevent-filename><a href=#dom-errorevent-filename>filename</a></code>, <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-lineno><a href=#dom-errorevent-lineno>lineno</a></code>, <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-colno><a href=#dom-errorevent-colno>colno</a></code>, <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-error><a href=#dom-errorevent-error>error</a></code> », "<code>rethrow</code>", and with <i id=event-handler-attributes:dfn-callback-this-value><a data-x-internal=dfn-callback-this-value href=https://webidl.spec.whatwg.org/#dfn-callback-this-value>callback this value</a></i> set to <var>event</var>'s <code id=event-handler-attributes:dom-event-currenttarget-2><a data-x-internal=dom-event-currenttarget href=https://dom.spec.whatwg.org/#dom-event-currenttarget>currentTarget</a></code>.</p>
     <dt>Otherwise<dd>
      <p>Let <var>return value</var> be the result of <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=event-handler-attributes:es-invoking-callback-functions-2 data-x-internal=es-invoking-callback-functions>invoking</a> <var>callback</var> with «
      <var>event</var> », "<code>rethrow</code>", and with <i id=event-handler-attributes:dfn-callback-this-value-2><a data-x-internal=dfn-callback-this-value href=https://webidl.spec.whatwg.org/#dfn-callback-this-value>callback this value</a></i> set to <var>event</var>'s <code id=event-handler-attributes:dom-event-currenttarget-3><a data-x-internal=dom-event-currenttarget href=https://dom.spec.whatwg.org/#dom-event-currenttarget>currentTarget</a></code>.</p>
     </dl>

    <p class=note>If an exception gets thrown by the callback, it will be rethrown, ending these
    steps. The exception will propagate to the <a href=https://dom.spec.whatwg.org/#concept-event-dispatch id=event-handler-attributes:concept-event-dispatch data-x-internal=concept-event-dispatch>DOM event
    dispatch logic</a>, which will then <a href=#report-an-exception id=event-handler-attributes:report-an-exception>report</a> it.</p>
   <li>
    <p>Process <var>return value</var> as follows:</p>

    <dl class=switch><dt>If <var>event</var> is a <code id=event-handler-attributes:beforeunloadevent><a href=nav-history-apis.html#beforeunloadevent>BeforeUnloadEvent</a></code> object and <var>event</var>'s <code id=event-handler-attributes:dom-event-type-2><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is "<code id=event-handler-attributes:event-beforeunload><a href=indices.html#event-beforeunload>beforeunload</a></code>"<dd>
      <p class=note>In this case, the <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-5>event handler
      IDL attribute</a>'s type will be <code id=event-handler-attributes:onbeforeunloadeventhandler><a href=#onbeforeunloadeventhandler>OnBeforeUnloadEventHandler</a></code>, so <var>return
      value</var> will have been coerced into either null or a <code id=event-handler-attributes:idl-domstring><a data-x-internal=idl-domstring href=https://webidl.spec.whatwg.org/#idl-DOMString>DOMString</a></code>.</p>

      <p>If <var>return value</var> is not null, then:</p>

      <ol><li><p>Set <var>event</var>'s <a id=event-handler-attributes:canceled-flag href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled flag</a>.<li><p>If <var>event</var>'s <code id=event-handler-attributes:dom-beforeunloadevent-returnvalue><a href=nav-history-apis.html#dom-beforeunloadevent-returnvalue>returnValue</a></code> attribute's value is the empty
       string, then set <var>event</var>'s <code id=event-handler-attributes:dom-beforeunloadevent-returnvalue-2><a href=nav-history-apis.html#dom-beforeunloadevent-returnvalue>returnValue</a></code> attribute's value to
       <var>return value</var>.</ol>
     <dt>If <var>special error event handling</var> is true<dd><p>If <var>return value</var> is true, then set <var>event</var>'s <a id=event-handler-attributes:canceled-flag-2 href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled
     flag</a>.<dt>Otherwise<dd>
      <p>If <var>return value</var> is false, then set <var>event</var>'s <a id=event-handler-attributes:canceled-flag-3 href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled
      flag</a>.</p>

      <p class=note>If we've gotten to this "Otherwise" clause because <var>event</var>'s <code id=event-handler-attributes:dom-event-type-3><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is "<code id=event-handler-attributes:event-beforeunload-2><a href=indices.html#event-beforeunload>beforeunload</a></code>" but <var>event</var> is <em>not</em> a
      <code id=event-handler-attributes:beforeunloadevent-2><a href=nav-history-apis.html#beforeunloadevent>BeforeUnloadEvent</a></code> object, then <var>return value</var> will never be false, since
      in such cases <var>return value</var> will have been coerced into either null or a <code id=event-handler-attributes:idl-domstring-2><a data-x-internal=idl-domstring href=https://webidl.spec.whatwg.org/#idl-DOMString>DOMString</a></code>.</p>
     </dl>
   </ol>

  

  <hr>

  <p>The <code id=event-handler-attributes:eventhandler-2><a href=#eventhandler>EventHandler</a></code> callback function type represents a callback used for event
  handlers. It is represented in Web IDL as follows:</p>

  <pre><code class='idl'>[<a id='event-handler-attributes:legacytreatnonobjectasnull' href='https://webidl.spec.whatwg.org/#LegacyTreatNonObjectAsNull' data-x-internal='legacytreatnonobjectasnull'><c- g>LegacyTreatNonObjectAsNull</c-></a>]
<c- b>callback</c-> <dfn id='eventhandlernonnull' data-dfn-type='callback'><c- g>EventHandlerNonNull</c-></dfn> = <c- b>any</c-> (<a id='event-handler-attributes:event-3' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> <c- g>event</c->);
<c- b>typedef</c-> <a href='#eventhandlernonnull' id='event-handler-attributes:eventhandlernonnull'><c- n>EventHandlerNonNull</c-></a>? <dfn id='eventhandler' data-dfn-type='typedef'><c- g>EventHandler</c-></dfn>;</code></pre>

  <p class=note>In JavaScript, any <code id=event-handler-attributes:idl-function><a data-x-internal=idl-function href=https://webidl.spec.whatwg.org/#common-Function>Function</a></code> object implements
  this interface.</p>

  <div class=example>

   <p>For example, the following document fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>body</c-> <c- e>onload</c-><c- o>=</c-><c- s>&quot;alert(this)&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;alert(this)&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>...leads to an alert saying "<code>[object Window]</code>" when the document is
   loaded, and an alert saying "<code>[object HTMLBodyElement]</code>" whenever the
   user clicks something in the page.</p>

  </div>

  <div class=note>
   <p>The return value of the function affects whether the event is canceled or not: as described above, if the return value is false, the event is canceled.</p>

   <p>There are two exceptions in the platform, for historical reasons:</p>

   <ul><li><p>The <code id=event-handler-attributes:handler-onerror><a href=#handler-onerror>onerror</a></code> handlers on global objects, where
    returning <em>true</em> cancels the event.<li><p>The <code id=event-handler-attributes:handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code> handler, where
    returning any non-null and non-undefined value will cancel the event.</ul>
  </div>

  <p>For historical reasons, the <code id=event-handler-attributes:handler-onerror-2><a href=#handler-onerror>onerror</a></code> handler has different
  arguments:</p>

  <pre><code class='idl'>[<a id='event-handler-attributes:legacytreatnonobjectasnull-2' href='https://webidl.spec.whatwg.org/#LegacyTreatNonObjectAsNull' data-x-internal='legacytreatnonobjectasnull'><c- g>LegacyTreatNonObjectAsNull</c-></a>]
<c- b>callback</c-> <dfn id='onerroreventhandlernonnull' data-dfn-type='callback'><c- g>OnErrorEventHandlerNonNull</c-></dfn> = <c- b>any</c-> ((<a id='event-handler-attributes:event-4' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> <c- b>or</c-> <c- b>DOMString</c->) <c- g>event</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>source</c->, <c- b>optional</c-> <c- b>unsigned</c-> <c- b>long</c-> <c- g>lineno</c->, <c- b>optional</c-> <c- b>unsigned</c-> <c- b>long</c-> <c- g>colno</c->, <c- b>optional</c-> <c- b>any</c-> <c- g>error</c->);
<c- b>typedef</c-> <a href='#onerroreventhandlernonnull' id='event-handler-attributes:onerroreventhandlernonnull'><c- n>OnErrorEventHandlerNonNull</c-></a>? <dfn id='onerroreventhandler' data-dfn-type='typedef'><c- g>OnErrorEventHandler</c-></dfn>;</code></pre>

  <div class=example>
   <pre><code class='js'>window<c- p>.</c->onerror <c- o>=</c-> <c- p>(</c->message<c- p>,</c-> source<c- p>,</c-> lineno<c- p>,</c-> colno<c- p>,</c-> error<c- p>)</c-> <c- p>=&gt;</c-> <c- p>{</c-> … <c- p>};</c-></code></pre>
  </div>

  <p>Similarly, the <code id=event-handler-attributes:handler-window-onbeforeunload-2><a href=#handler-window-onbeforeunload>onbeforeunload</a></code> handler has a
  different return value:</p>

  <pre><code class='idl'>[<a id='event-handler-attributes:legacytreatnonobjectasnull-3' href='https://webidl.spec.whatwg.org/#LegacyTreatNonObjectAsNull' data-x-internal='legacytreatnonobjectasnull'><c- g>LegacyTreatNonObjectAsNull</c-></a>]
<c- b>callback</c-> <dfn id='onbeforeunloadeventhandlernonnull' data-dfn-type='callback'><c- g>OnBeforeUnloadEventHandlerNonNull</c-></dfn> = <c- b>DOMString</c->? (<a id='event-handler-attributes:event-5' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> <c- g>event</c->);
<c- b>typedef</c-> <a href='#onbeforeunloadeventhandlernonnull' id='event-handler-attributes:onbeforeunloadeventhandlernonnull'><c- n>OnBeforeUnloadEventHandlerNonNull</c-></a>? <dfn id='onbeforeunloadeventhandler' data-dfn-type='typedef'><c- g>OnBeforeUnloadEventHandler</c-></dfn>;</code></pre>

  

  

  <hr>

  <p>An <dfn id=internal-raw-uncompiled-handler>internal raw uncompiled handler</dfn> is a tuple with the following information:</p>

  <ul><li><p>An uncompiled script body<li><p>A location where the script body originated, in case an error needs to be
   reported</ul>

  <p>When the user agent is to <dfn id=getting-the-current-value-of-the-event-handler>get the
  current value of the event handler</dfn> given an <code id=event-handler-attributes:eventtarget-8><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object
  <var>eventTarget</var> and a string <var>name</var> that is the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-8>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-32>event handler</a>, it must run these
  steps:</p>

  <ol><li><p>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-10>event handler
   map</a>.<li><p>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li>
    <p>If <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-8>value</a> is an
    <a href=#internal-raw-uncompiled-handler id=event-handler-attributes:internal-raw-uncompiled-handler-3>internal raw uncompiled handler</a>, then:</p>

    <ol><li><p>If <var>eventTarget</var> is an element, then let <var>element</var> be
     <var>eventTarget</var>, and <var>document</var> be <var>element</var>'s <a id=event-handler-attributes:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
     document</a>. Otherwise, <var>eventTarget</var> is a <code id=event-handler-attributes:window-5><a href=nav-history-apis.html#window>Window</a></code> object, let
     <var>element</var> be null, and <var>document</var> be <var>eventTarget</var>'s <a href=nav-history-apis.html#concept-document-window id=event-handler-attributes:concept-document-window>associated <code>Document</code></a>.<li><p>If <a href=#concept-n-noscript id=event-handler-attributes:concept-n-noscript>scripting is disabled</a> for
     <var>document</var>, then return null.<li><p>Let <var>body</var> be the uncompiled script body in <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-9>value</a>.<li><p>Let <var>location</var> be the location where the script body originated, as
     given by <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-10>value</a>.<li><p>If <var>element</var> is not null and <var>element</var> has a
     <a id=event-handler-attributes:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>, let <var>form owner</var> be that <a id=event-handler-attributes:form-owner-2 href=form-control-infrastructure.html#form-owner>form owner</a>.
     Otherwise, let <var>form owner</var> be null.<li><p>Let <var>settings object</var> be the <a href=#relevant-settings-object id=event-handler-attributes:relevant-settings-object>relevant settings object</a> of
     <var>document</var>.<li>
      <p>If <var>body</var> is not parsable as <i id=event-handler-attributes:js-prod-functionbody-2><a data-x-internal=js-prod-functionbody href=https://tc39.es/ecma262/#prod-FunctionBody>FunctionBody</a></i>
      or if parsing detects an <a id=event-handler-attributes:early-error href=https://tc39.es/ecma262/#early-error-rule data-x-internal=early-error>early error</a>, then follow these substeps:</p>

      <ol><li>
        <p>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-11>value</a> to
        null.</p>

        <p class=note>This does not <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-6>deactivate</a>
        the event handler, which additionally <a href=https://dom.spec.whatwg.org/#remove-an-event-listener id=event-handler-attributes:remove-an-event-listener-2 data-x-internal=remove-an-event-listener>removes</a>
        the event handler's <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-6>listener</a> (if present).</p>
       <li><p>Let <var>syntaxError</var> be a new <code id=event-handler-attributes:syntaxerror-2><a data-x-internal=syntaxerror-2 href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-syntaxerror>SyntaxError</a></code> exception associated
       with <var>settings object</var>'s <a href="#environment-settings-object's-realm" id="event-handler-attributes:environment-settings-object's-realm">realm</a> which describes the error while parsing. It should be based on
       <var>location</var>, where the script body originated.<li><p><a href=#report-an-exception id=event-handler-attributes:report-an-exception-2>Report an exception</a> with <var>syntaxError</var>
       for <var>settings object</var>'s <a href=#concept-settings-object-global id=event-handler-attributes:concept-settings-object-global>global
       object</a>.<li><p>Return null.</ol>
     <li>
      <p>Push <var>settings object</var>'s <a href=#realm-execution-context id=event-handler-attributes:realm-execution-context>realm execution context</a> onto the
      <a id=event-handler-attributes:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>; it is now the <a id=event-handler-attributes:running-javascript-execution-context href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript
      execution context</a>.</p>

      <p class=note>This is necessary so the subsequent invocation of <a href=https://tc39.es/ecma262/#sec-ordinaryfunctioncreate id=event-handler-attributes:js-ordinaryfunctioncreate data-x-internal=js-ordinaryfunctioncreate>OrdinaryFunctionCreate</a> takes place in the correct
      <a id=event-handler-attributes:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>.</p>
     <li>
      <p>Let <var>function</var> be the result of calling <a href=https://tc39.es/ecma262/#sec-ordinaryfunctioncreate id=event-handler-attributes:js-ordinaryfunctioncreate-2 data-x-internal=js-ordinaryfunctioncreate>OrdinaryFunctionCreate</a>, with arguments:</p>

      <dl><dt><var>functionPrototype</var><dd><a id=event-handler-attributes:function.prototype href=https://tc39.es/ecma262/#sec-properties-of-the-function-prototype-object data-x-internal=function.prototype>%Function.prototype%</a><dt><var>sourceText</var><dd>
        <dl class=switch><dt>If <var>name</var> is <code id=event-handler-attributes:handler-onerror-3><a href=#handler-onerror>onerror</a></code> and
         <var>eventTarget</var> is a <code id=event-handler-attributes:window-6><a href=nav-history-apis.html#window>Window</a></code> object<dd>The string formed by concatenating "<code>function </code>", <var>name</var>,
         "<code>(event, source, lineno, colno, error) {</code>", U+000A LF,
         <var>body</var>, U+000A LF, and "<code>}</code>".<dt>Otherwise<dd>The string formed by concatenating "<code>function </code>", <var>name</var>,
         "<code>(event) {</code>", U+000A LF, <var>body</var>, U+000A LF, and "<code>}</code>".</dl>
       <dt><var>ParameterList</var><dd>
        <dl class=switch><dt>If <var>name</var> is <code id=event-handler-attributes:handler-onerror-4><a href=#handler-onerror>onerror</a></code> and
         <var>eventTarget</var> is a <code id=event-handler-attributes:window-7><a href=nav-history-apis.html#window>Window</a></code> object<dd>Let the function have five arguments, named <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and
         <code>error</code>.<dt>Otherwise<dd>Let the function have a single argument called <code>event</code>.</dl>
       <dt><var>body</var><dd>The result of parsing <var>body</var> above.<dt><var>thisMode</var><dd>non-lexical-this<dt><var>scope</var><dd>
        <ol><li><p>Let <var>realm</var> be <var>settings object</var>'s <a href="#environment-settings-object's-realm" id="event-handler-attributes:environment-settings-object's-realm-2">realm</a>.<li><p>Let <var>scope</var> be <var>realm</var>.[[GlobalEnv]].<li>
          <p>If <var>eventHandler</var> is an element's <a href=#event-handlers id=event-handler-attributes:event-handlers-33>event
          handler</a>, then set <var>scope</var> to <a href=https://tc39.es/ecma262/#sec-newobjectenvironment id=event-handler-attributes:js-newobjectenvironment data-x-internal=js-newobjectenvironment>NewObjectEnvironment</a>(<var>document</var>, true,
          <var>scope</var>).</p>

          <p>(Otherwise, <var>eventHandler</var> is a <code id=event-handler-attributes:window-8><a href=nav-history-apis.html#window>Window</a></code> object's <a href=#event-handlers id=event-handler-attributes:event-handlers-34>event handler</a>.)</p>
         <li><p>If <var>form owner</var> is not null, then set <var>scope</var> to <a href=https://tc39.es/ecma262/#sec-newobjectenvironment id=event-handler-attributes:js-newobjectenvironment-2 data-x-internal=js-newobjectenvironment>NewObjectEnvironment</a>(<var>form owner</var>, true,
         <var>scope</var>).<li><p>If <var>element</var> is not null, then set <var>scope</var> to <a href=https://tc39.es/ecma262/#sec-newobjectenvironment id=event-handler-attributes:js-newobjectenvironment-3 data-x-internal=js-newobjectenvironment>NewObjectEnvironment</a>(<var>element</var>, true,
         <var>scope</var>).<li><p>Return <var>scope</var>.</ol>
       </dl>
     <li><p>Remove <var>settings object</var>'s <a href=#realm-execution-context id=event-handler-attributes:realm-execution-context-2>realm execution context</a> from the
     <a id=event-handler-attributes:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li>
      <p>Set <var>function</var>.[[ScriptOrModule]] to null.</p>

      <div class=note>
       <p>This is done because the default behavior, of associating the created function
       with the nearest <a href=#concept-script id=event-handler-attributes:concept-script>script</a> on the stack, can lead to
       path-dependent results. For example, an event handler which is first invoked by user
       interaction would end up with null [[ScriptOrModule]] (since then this algorithm would be
       first invoked when the <a href=#active-script id=event-handler-attributes:active-script>active script</a> is null), whereas one that is first invoked
       by dispatching an event from script would have its [[ScriptOrModule]] set to that script.</p>

       <p>Instead, we just always set [[ScriptOrModule]] to null. This is more intuitive anyway; the
       idea that the first script which dispatches an event is somehow responsible for the event
       handler code is dubious.</p>

       <p>In practice, this only affects the resolution of relative URLs via <code id=event-handler-attributes:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code>,
       which consult the <a href=#concept-script-base-url id=event-handler-attributes:concept-script-base-url>base URL</a> of the associated
       script. Nulling out [[ScriptOrModule]] means that <a href=#hostloadimportedmodule id=event-handler-attributes:hostloadimportedmodule>HostLoadImportedModule</a> will
       fall back to the <a href=#current-settings-object id=event-handler-attributes:current-settings-object>current settings object</a>'s <a href=#api-base-url id=event-handler-attributes:api-base-url>API base URL</a>.</p>
      </div>
     <li><p>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-12>value</a> to the
     result of creating a Web IDL <code id=event-handler-attributes:eventhandler-3><a href=#eventhandler>EventHandler</a></code> callback function object whose object
     reference is <var>function</var> and whose <a id=event-handler-attributes:callback-context-2 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a> is <var>settings
     object</var>.</ol>
   <li><p>Return <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-13>value</a>.</ol>

  



  <h5 id=event-handlers-on-elements,-document-objects,-and-window-objects><span class=secno>8.1.8.2</span> Event handlers on elements, <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document><a href=dom.html#document>Document</a></code> objects, and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window><a href=nav-history-apis.html#window>Window</a></code> objects<a href=#event-handlers-on-elements,-document-objects,-and-window-objects class=self-link></a></h5>

  <p>The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type>event handler event types</a>) that must be
  supported by all <a id=event-handlers-on-elements,-document-objects,-and-window-objects:html-elements href=infrastructure.html#html-elements>HTML elements</a>, as both <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes>event handler content attributes</a>
  and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes>event handler IDL attributes</a>; and that must be
  supported by all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document-2><a href=dom.html#document>Document</a></code> and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-2><a href=nav-history-apis.html#window>Window</a></code> objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-2>event handler IDL
  attributes</a>:</p>

  <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-2>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-2>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onabort data-dfn-type=attribute><code>onabort</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event title="The abort event is fired when the resource was not fully loaded, but not as the result of an error.">HTMLMediaElement/abort_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code>abort</code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onauxclick data-dfn-type=attribute><code>onauxclick</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event title="The auxclick event is fired at an Element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element.">Element/auxclick_event</a><div class=support><span class="firefox yes"><span>Firefox</span><span>53+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>55+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>53+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-auxclick><a data-x-internal=event-auxclick href=https://w3c.github.io/uievents/#event-type-auxclick>auxclick</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onbeforeinput data-dfn-type=attribute><code>onbeforeinput</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforeinput><a data-x-internal=event-beforeinput href=https://w3c.github.io/uievents/#event-type-beforeinput>beforeinput</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onbeforematch data-dfn-type=attribute><code>onbeforematch</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforematch><a href=indices.html#event-beforematch>beforematch</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onbeforetoggle data-dfn-type=attribute><code>onbeforetoggle</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforetoggle><a href=indices.html#event-beforetoggle>beforetoggle</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncancel data-dfn-type=attribute><code>oncancel</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event title="The cancel event fires on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the Esc key.">HTMLDialogElement/cancel_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>15.4+</span></span><span class="chrome yes"><span>Chrome</span><span>37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android no"><span>Chrome Android</span><span>No</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-cancel><a href=indices.html#event-cancel>cancel</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncanplay data-dfn-type=attribute><code>oncanplay</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event title="The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplay_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-canplay><a href=media.html#event-media-canplay>canplay</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncanplaythrough data-dfn-type=attribute><code>oncanplaythrough</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event title="The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplaythrough_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-canplaythrough><a href=media.html#event-media-canplaythrough>canplaythrough</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onchange data-dfn-type=attribute><code>onchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event title="The change event is fired for <input>, <select>, and <textarea> elements when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.">HTMLElement/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-change><a href=indices.html#event-change>change</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onclick data-dfn-type=attribute><code>onclick</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event title="An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.">Element/click_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onclose data-dfn-type=attribute><code>onclose</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-close><a href=indices.html#event-close>close</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncommand data-dfn-type=attribute><code>oncommand</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-command><a href=indices.html#event-command>command</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncontextlost data-dfn-type=attribute><code>oncontextlost</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-contextlost><a href=indices.html#event-contextlost>contextlost</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncontextmenu data-dfn-type=attribute><code>oncontextmenu</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-contextmenu><a data-x-internal=event-contextmenu href=https://w3c.github.io/uievents/#event-type-contextmenu>contextmenu</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncontextrestored data-dfn-type=attribute><code>oncontextrestored</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-contextrestored><a href=indices.html#event-contextrestored>contextrestored</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncopy data-dfn-type=attribute><code>oncopy</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event title="The copy event fires when the user initiates a copy action through the browser's user interface.">Element/copy_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-copy><a data-x-internal=event-copy href=https://w3c.github.io/clipboard-apis/#clipboard-event-copy>copy</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncuechange data-dfn-type=attribute><code>oncuechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement/cuechange_event title="The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.">HTMLTrackElement/cuechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>68+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera yes"><span>Opera</span><span>19+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4.3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>19+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-cuechange><a href=media.html#event-media-cuechange>cuechange</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncut data-dfn-type=attribute><code>oncut</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event title="The cut event is fired when the user has initiated a &quot;cut&quot; action through the browser's user interface.">Element/cut_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-cut><a data-x-internal=event-cut href=https://w3c.github.io/clipboard-apis/#clipboard-event-cut>cut</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondblclick data-dfn-type=attribute><code>ondblclick</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event title="The dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time.">Element/dblclick_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android no"><span>Chrome Android</span><span>No</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dblclick><a data-x-internal=event-dblclick href=https://w3c.github.io/uievents/#event-type-dblclick>dblclick</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondrag data-dfn-type=attribute><code>ondrag</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-drag><a href=dnd.html#event-dnd-drag>drag</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragend data-dfn-type=attribute><code>ondragend</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragend><a href=dnd.html#event-dnd-dragend>dragend</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragenter data-dfn-type=attribute><code>ondragenter</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragenter><a href=dnd.html#event-dnd-dragenter>dragenter</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragleave data-dfn-type=attribute><code>ondragleave</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragleave><a href=dnd.html#event-dnd-dragleave>dragleave</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragover data-dfn-type=attribute><code>ondragover</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragover><a href=dnd.html#event-dnd-dragover>dragover</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragstart data-dfn-type=attribute><code>ondragstart</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragstart><a href=dnd.html#event-dnd-dragstart>dragstart</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondrop data-dfn-type=attribute><code>ondrop</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-drop><a href=dnd.html#event-dnd-drop>drop</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondurationchange data-dfn-type=attribute><code>ondurationchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event title="The durationchange event is fired when the duration attribute has been updated.">HTMLMediaElement/durationchange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-durationchange><a href=media.html#event-media-durationchange>durationchange</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onemptied data-dfn-type=attribute><code>onemptied</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event title="The emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.">HTMLMediaElement/emptied_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-emptied><a href=media.html#event-media-emptied>emptied</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onended data-dfn-type=attribute><code>onended</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event title="The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.">HTMLMediaElement/ended_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-ended><a href=media.html#event-media-ended>ended</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onformdata data-dfn-type=attribute><code>onformdata</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-formdata><a href=indices.html#event-formdata>formdata</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oninput data-dfn-type=attribute><code>oninput</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event title="The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.">HTMLElement/input_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span title="Partial implementation.">🔰 9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oninvalid data-dfn-type=attribute><code>oninvalid</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-invalid><a href=indices.html#event-invalid>invalid</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onkeydown data-dfn-type=attribute><code>onkeydown</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event title="The keydown event is fired when a key is pressed.">Element/keydown_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>1.2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-keydown><a data-x-internal=event-keydown href=https://w3c.github.io/uievents/#event-type-keydown>keydown</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onkeypress data-dfn-type=attribute><code>onkeypress</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-keypress><a data-x-internal=event-keypress href=https://w3c.github.io/uievents/#event-type-keypress>keypress</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onkeyup data-dfn-type=attribute><code>onkeyup</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event title="The keyup event is fired when a key is released.">Element/keyup_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>1.2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-keyup><a data-x-internal=event-keyup href=https://w3c.github.io/uievents/#event-type-keyup>keyup</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onloadeddata data-dfn-type=attribute><code>onloadeddata</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event title="The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.">HTMLMediaElement/loadeddata_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-loadeddata><a href=media.html#event-media-loadeddata>loadeddata</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onloadedmetadata data-dfn-type=attribute><code>onloadedmetadata</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event title="The loadedmetadata event is fired when the metadata has been loaded.">HTMLMediaElement/loadedmetadata_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-loadedmetadata><a href=media.html#event-media-loadedmetadata>loadedmetadata</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onloadstart data-dfn-type=attribute><code>onloadstart</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event title="The loadstart event is fired when the browser has started to load a resource.">HTMLMediaElement/loadstart_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-loadstart><a href=media.html#event-media-loadstart>loadstart</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmousedown data-dfn-type=attribute><code>onmousedown</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event title="The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element.">Element/mousedown_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mousedown><a data-x-internal=event-mousedown href=https://w3c.github.io/uievents/#event-type-mousedown>mousedown</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseenter data-dfn-type=attribute><code>onmouseenter</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event title="The mouseenter event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.">Element/mouseenter_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>10+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>30+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseenter><a data-x-internal=event-mouseenter href=https://w3c.github.io/uievents/#event-type-mouseenter>mouseenter</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseleave data-dfn-type=attribute><code>onmouseleave</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event title="The mouseleave event is fired at an Element when the cursor of a pointing device (usually a mouse) is moved out of it.">Element/mouseleave_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>10+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>30+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseleave><a data-x-internal=event-mouseleave href=https://w3c.github.io/uievents/#event-type-mouseleave>mouseleave</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmousemove data-dfn-type=attribute><code>onmousemove</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event title="The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.">Element/mousemove_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mousemove><a data-x-internal=event-mousemove href=https://w3c.github.io/uievents/#event-type-mousemove>mousemove</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseout data-dfn-type=attribute><code>onmouseout</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event title="The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.">Element/mouseout_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseout><a data-x-internal=event-mouseout href=https://w3c.github.io/uievents/#event-type-mouseout>mouseout</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseover data-dfn-type=attribute><code>onmouseover</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event title="The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.">Element/mouseover_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>9.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseover><a data-x-internal=event-mouseover href=https://w3c.github.io/uievents/#event-type-mouseover>mouseover</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseup data-dfn-type=attribute><code>onmouseup</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event title="The mouseup event is fired at an Element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it.">Element/mouseup_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseup><a data-x-internal=event-mouseup href=https://w3c.github.io/uievents/#event-type-mouseup>mouseup</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onpaste data-dfn-type=attribute><code>onpaste</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event title="The paste event is fired when the user has initiated a &quot;paste&quot; action through the browser's user interface.">Element/paste_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-paste><a data-x-internal=event-paste href=https://w3c.github.io/clipboard-apis/#clipboard-event-paste>paste</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onpause data-dfn-type=attribute><code>onpause</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event title="The pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method.">HTMLMediaElement/pause_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-pause><a href=media.html#event-media-pause>pause</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onplay data-dfn-type=attribute><code>onplay</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event title="The play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.">HTMLMediaElement/play_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-play><a href=media.html#event-media-play>play</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onplaying data-dfn-type=attribute><code>onplaying</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event title="The playing event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to lack of data.">HTMLMediaElement/playing_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-playing><a href=media.html#event-media-playing>playing</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onprogress data-dfn-type=attribute><code>onprogress</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event title="The progress event is fired periodically as the browser loads a resource.">HTMLMediaElement/progress_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-progress><a href=media.html#event-media-progress>progress</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onratechange data-dfn-type=attribute><code>onratechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event title="The ratechange event is fired when the playback rate has changed.">HTMLMediaElement/ratechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-ratechange><a href=media.html#event-media-ratechange>ratechange</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onreset data-dfn-type=attribute><code>onreset</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-reset><a href=indices.html#event-reset>reset</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onscrollend data-dfn-type=attribute><code>onscrollend</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event title="The scrollend event fires when the document view has completed scrolling. Scrolling is considered completed when the scroll position has no more pending updates and the user has completed their gesture.">Document/scrollend_event</a><div class=support><span class="firefox yes"><span>Firefox</span><span>109+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event title="The scrollend event fires when element scrolling has completed. Scrolling is considered completed when the scroll position has no more pending updates and the user has completed their gesture.">Element/scrollend_event</a><div class=support><span class="firefox yes"><span>Firefox</span><span>109+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-scrollend><a data-x-internal=event-scrollend href=https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend>scrollend</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onsecuritypolicyviolation data-dfn-type=attribute><code>onsecuritypolicyviolation</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/securitypolicyviolation_event title="The securitypolicyviolation event is fired when a Content Security Policy is violated.">Element/securitypolicyviolation_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>41+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>15+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-securitypolicyviolation><a data-x-internal=event-securitypolicyviolation href=https://w3c.github.io/webappsec-csp/#eventdef-globaleventhandlers-securitypolicyviolation>securitypolicyviolation</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onseeked data-dfn-type=attribute><code>onseeked</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event title="The seeked event is fired when a seek operation completed, the current playback position has changed, and the Boolean seeking attribute is changed to false.">HTMLMediaElement/seeked_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-seeked><a href=media.html#event-media-seeked>seeked</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onseeking data-dfn-type=attribute><code>onseeking</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event title="The seeking event is fired when a seek operation starts, meaning the Boolean seeking attribute has changed to true and the media is seeking a new position.">HTMLMediaElement/seeking_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-seeking><a href=media.html#event-media-seeking>seeking</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onselect data-dfn-type=attribute><code>onselect</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event title="The select event fires when some text has been selected.">HTMLInputElement/select_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event title="The select event fires when some text has been selected.">HTMLTextAreaElement/select_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-select><a href=indices.html#event-select>select</a></code>  
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onslotchange data-dfn-type=attribute><code>onslotchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event title="The slotchange event is fired on an HTMLSlotElement instance (<slot> element) when the node(s) contained in that slot change.">HTMLSlotElement/slotchange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-slotchange><a data-x-internal=event-slotchange href=https://dom.spec.whatwg.org/#eventdef-htmlslotelement-slotchange>slotchange</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onstalled data-dfn-type=attribute><code>onstalled</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event title="The stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.">HTMLMediaElement/stalled_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-stalled><a href=media.html#event-media-stalled>stalled</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onsubmit data-dfn-type=attribute><code>onsubmit</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event title="The submit event fires when a <form> is submitted.">HTMLFormElement/submit_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-submit><a href=indices.html#event-submit>submit</a></code> 
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onsuspend data-dfn-type=attribute><code>onsuspend</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event title="The suspend event is fired when media data loading has been suspended.">HTMLMediaElement/suspend_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-suspend><a href=media.html#event-media-suspend>suspend</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ontimeupdate data-dfn-type=attribute><code>ontimeupdate</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event title="The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.">HTMLMediaElement/timeupdate_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-timeupdate><a href=media.html#event-media-timeupdate>timeupdate</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ontoggle data-dfn-type=attribute><code>ontoggle</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-toggle><a href=indices.html#event-toggle>toggle</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onvolumechange data-dfn-type=attribute><code>onvolumechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event title="The volumechange event is fired when either the volume attribute or the muted attribute has changed.">HTMLMediaElement/volumechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-volumechange><a href=media.html#event-media-volumechange>volumechange</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwaiting data-dfn-type=attribute><code>onwaiting</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event title="The waiting event is fired when playback has stopped because of a temporary lack of data.">HTMLMediaElement/waiting_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-waiting><a href=media.html#event-media-waiting>waiting</a></code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkitanimationend data-dfn-type=attribute><code>onwebkitanimationend</code></dfn> <td> <code>webkitAnimationEnd</code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkitanimationiteration data-dfn-type=attribute><code>onwebkitanimationiteration</code></dfn> <td> <code>webkitAnimationIteration</code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkitanimationstart data-dfn-type=attribute><code>onwebkitanimationstart</code></dfn> <td> <code>webkitAnimationStart</code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkittransitionend data-dfn-type=attribute><code>onwebkittransitionend</code></dfn> <td> <code>webkitTransitionEnd</code>
    <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwheel data-dfn-type=attribute><code>onwheel</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event title="The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse).">Element/wheel_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>17+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>31+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios no"><span>Safari iOS</span><span>No</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-wheel><a data-x-internal=event-wheel href=https://w3c.github.io/uievents/#event-type-wheel>wheel</a></code> 


 

 
  </table>

  <hr>

  <p>The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-3>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-3>event handler event types</a>) that must be
  supported by all <a id=event-handlers-on-elements,-document-objects,-and-window-objects:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> other than <code id=event-handlers-on-elements,-document-objects,-and-window-objects:the-body-element><a href=sections.html#the-body-element>body</a></code> and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:frameset><a href=obsolete.html#frameset>frameset</a></code>
  elements, as both <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes-2>event handler content attributes</a> and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-3>event handler IDL
  attributes</a>; that must be supported by all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document-3><a href=dom.html#document>Document</a></code>
  objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-4>event handler IDL attributes</a>; and that must be
  supported by all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-3><a href=nav-history-apis.html#window>Window</a></code> objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-5>event handler IDL attributes</a> on the
  <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-4><a href=nav-history-apis.html#window>Window</a></code> objects themselves, and with corresponding <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes-3>event handler content
  attributes</a> and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-6>event handler IDL attributes</a> exposed on all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:the-body-element-2><a href=sections.html#the-body-element>body</a></code>
  and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:frameset-2><a href=obsolete.html#frameset>frameset</a></code> elements that are owned by that <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-5><a href=nav-history-apis.html#window>Window</a></code> object's <a href=nav-history-apis.html#concept-document-window id=event-handlers-on-elements,-document-objects,-and-window-objects:concept-document-window>associated <code>Document</code></a>:</p>

  <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-4>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-4>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onblur data-dfn-type=attribute><code>onblur</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event title="The blur event fires when an element has lost focus. The event does not bubble, but the related focusout event that follows does bubble.">Element/blur_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>24+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/blur_event title="The blur event fires when an element has lost focus.">Window/blur_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-blur><a href=indices.html#event-blur>blur</a></code> 
    <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onerror data-dfn-type=attribute><code>onerror</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event title="The error event is fired on a Window object when a resource failed to load or couldn't be used — for example if a script has an execution error.">Window/error_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-error><a href=indices.html#event-error>error</a></code>
    <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onfocus data-dfn-type=attribute><code>onfocus</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event title="The focus event fires when an element has received focus. The event does not bubble, but the related focusin event that follows does bubble.">Element/focus_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>24+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event title="The focus event fires when an element has received focus.">Window/focus_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-focus><a href=indices.html#event-focus>focus</a></code> 
    <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onload data-dfn-type=attribute><code>onload</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-load><a href=indices.html#event-load>load</a></code>
    <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onresize data-dfn-type=attribute><code>onresize</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-resize><a data-x-internal=event-resize href=https://drafts.csswg.org/cssom-view/#eventdef-window-resize>resize</a></code>
    <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onscroll data-dfn-type=attribute><code>onscroll</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event title="The scroll event fires when the document view has been scrolled. To detect when scrolling has completed, see the Document: scrollend event. For element scrolling, see Element: scroll event.">Document/scroll_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event title="The scroll event fires when an element has been scrolled. To detect when scrolling has completed, see the Element: scrollend event.">Element/scroll_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>1.3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-scroll><a data-x-internal=event-scroll href=https://drafts.csswg.org/cssom-view/#eventdef-document-scroll>scroll</a></code>
  </table>

  <p>We call the <a id=event-handlers-on-elements,-document-objects,-and-window-objects:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of the <a href=#event-handler-name id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-name>names</a> of the
  <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-5>event handlers</a> listed in the first column of this table the
  <dfn id=window-reflecting-body-element-event-handler-set><code>Window</code>-reflecting body element event handler set</dfn>.</p>

  <hr>

  <p>The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-6>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-5>event handler event types</a>) that must be
  supported by <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-6><a href=nav-history-apis.html#window>Window</a></code> objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-7>event handler IDL attributes</a> on the
  <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-7><a href=nav-history-apis.html#window>Window</a></code> objects themselves, and with corresponding <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes-4>event handler content
  attributes</a> and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-8>event handler IDL attributes</a> exposed on all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:the-body-element-3><a href=sections.html#the-body-element>body</a></code>
  and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:frameset-3><a href=obsolete.html#frameset>frameset</a></code> elements that are owned by that <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-8><a href=nav-history-apis.html#window>Window</a></code> object's <a href=nav-history-apis.html#concept-document-window id=event-handlers-on-elements,-document-objects,-and-window-objects:concept-document-window-2>associated <code>Document</code></a>:</p>

  <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-7>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-6>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onafterprint data-dfn-type=attribute><code>onafterprint</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/afterprint_event title="The afterprint event is fired after the associated document has started printing or the print preview has been closed.">Window/afterprint_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>13+</span></span><span class="chrome yes"><span>Chrome</span><span>63+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-afterprint><a href=indices.html#event-afterprint>afterprint</a></code>
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onbeforeprint data-dfn-type=attribute><code>onbeforeprint</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeprint_event title="The beforeprint event is fired when the associated document is about to be printed or previewed for printing.">Window/beforeprint_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>13+</span></span><span class="chrome yes"><span>Chrome</span><span>63+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforeprint><a href=indices.html#event-beforeprint>beforeprint</a></code>
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onbeforeunload data-dfn-type=attribute><code>onbeforeunload</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event title="The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.">Window/beforeunload_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforeunload><a href=indices.html#event-beforeunload>beforeunload</a></code>
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onhashchange data-dfn-type=attribute><code>onhashchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event title="The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).">Window/hashchange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>8+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-hashchange><a href=indices.html#event-hashchange>hashchange</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onlanguagechange data-dfn-type=attribute><code>onlanguagechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/languagechange_event title="The languagechange event is fired at the global scope object when the user's preferred language changes.">Window/languagechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>32+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>4.0+</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-languagechange><a href=indices.html#event-languagechange>languagechange</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onmessage data-dfn-type=attribute><code>onmessage</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event title="The message event is fired on a Window object when the window receives a message, for example from a call to Window.postMessage() from another browsing context.">Window/message_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>60+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>47+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-message><a href=indices.html#event-message>message</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onmessageerror data-dfn-type=attribute><code>onmessageerror</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event title="The error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).">HTMLMediaElement/error_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/messageerror_event title="The messageerror event is fired on a Window object when it receives a message that can't be deserialized.">Window/messageerror_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>57+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>60+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>47+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-messageerror><a href=indices.html#event-messageerror>messageerror</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onoffline data-dfn-type=attribute><code>onoffline</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event title="The offline event of the Window interface is fired when the browser has lost access to the network and the value of Navigator.onLine switches to false.">Window/offline_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-offline><a href=indices.html#event-offline>offline</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-ononline data-dfn-type=attribute><code>ononline</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event title="The online event of the Window interface is fired when the browser has gained access to the network and the value of Navigator.onLine switches to true.">Window/online_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-online><a href=indices.html#event-online>online</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpageswap data-dfn-type=attribute><code>onpageswap</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pageswap><a href=indices.html#event-pageswap>pageswap</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpagehide data-dfn-type=attribute><code>onpagehide</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pagehide><a href=indices.html#event-pagehide>pagehide</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpagereveal data-dfn-type=attribute><code>onpagereveal</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pagereveal><a href=indices.html#event-pagereveal>pagereveal</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpageshow data-dfn-type=attribute><code>onpageshow</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pageshow><a href=indices.html#event-pageshow>pageshow</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpopstate data-dfn-type=attribute><code>onpopstate</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event title="The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited or, if history.pushState() has been used to add a history entry to the history stack, that history entry is used instead.">Window/popstate_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11.5+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-popstate><a href=indices.html#event-popstate>popstate</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onrejectionhandled data-dfn-type=attribute><code>onrejectionhandled</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/rejectionhandled_event title="The rejectionhandled event is sent to the script's global scope (usually window but also Worker) whenever a rejected JavaScript Promise is handled late, i.e. when a handler is attached to the promise after its rejection had caused an unhandledrejection event.">Window/rejectionhandled_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>69+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-rejectionhandled><a href=indices.html#event-rejectionhandled>rejectionhandled</a></code>
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onstorage data-dfn-type=attribute><code>onstorage</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event title="The storage event of the Window interface fires when a storage area (localStorage) has been modified in the context of another document.">Window/storage_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>45+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>15+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-storage><a href=indices.html#event-storage>storage</a></code> 
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onunhandledrejection data-dfn-type=attribute><code>onunhandledrejection</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event title="The unhandledrejection event is sent to the global scope of a script when a JavaScript Promise that has no rejection handler is rejected; typically, this is the window, but may also be a Worker.">Window/unhandledrejection_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>69+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-unhandledrejection><a href=indices.html#event-unhandledrejection>unhandledrejection</a></code>
    <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onunload data-dfn-type=attribute><code>onunload</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event title="The unload event is fired when the document or a child resource is being unloaded.">Window/unload_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>4+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-unload><a href=indices.html#event-unload>unload</a></code> 
  </table>

  <p>This list of <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-8>event handlers</a> is reified as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-9>event handler IDL
  attributes</a> through the <code id=event-handlers-on-elements,-document-objects,-and-window-objects:windoweventhandlers><a href=#windoweventhandlers>WindowEventHandlers</a></code> interface mixin.</p>

  <hr>

  <p>The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-9>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-7>event handler event types</a>) that must be
  supported on <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document-4><a href=dom.html#document>Document</a></code> objects as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-10>event handler IDL attributes</a>:</p>

  

  <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-10>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-8>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=Document id=handler-onreadystatechange data-dfn-type=attribute><code>onreadystatechange</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-readystatechange><a href=indices.html#event-readystatechange>readystatechange</a></code>
    <tr><td><dfn data-dfn-for=Document id=handler-onvisibilitychange data-dfn-type=attribute><code>onvisibilitychange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event title="The visibilitychange event is fired at the document when the contents of its tab have become visible or have been hidden.">Document/visibilitychange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>62+</span></span><hr><span class="opera yes"><span>Opera</span><span>49+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie yes"><span>Internet Explorer</span><span title="Partial implementation.">🔰 10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>62+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>46+</span></span></div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-visibilitychange><a href=indices.html#event-visibilitychange>visibilitychange</a></code>
  </table>


  

  <h6 id=idl-definitions><span class=secno>8.1.8.2.1</span> IDL definitions<a href=#idl-definitions class=self-link></a></h6>

  <pre><code class='idl'><c- b>interface</c-> <c- b>mixin</c-> <dfn id='globaleventhandlers' data-dfn-type='interface'><c- g>GlobalEventHandlers</c-></dfn> {
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-onabort' id='idl-definitions:handler-onabort'><c- g>onabort</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-2'><c- n>EventHandler</c-></a> <a href='#handler-onauxclick' id='idl-definitions:handler-onauxclick'><c- g>onauxclick</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-3'><c- n>EventHandler</c-></a> <a href='#handler-onbeforeinput' id='idl-definitions:handler-onbeforeinput'><c- g>onbeforeinput</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-4'><c- n>EventHandler</c-></a> <a href='#handler-onbeforematch' id='idl-definitions:handler-onbeforematch'><c- g>onbeforematch</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-5'><c- n>EventHandler</c-></a> <a href='#handler-onbeforetoggle' id='idl-definitions:handler-onbeforetoggle'><c- g>onbeforetoggle</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-6'><c- n>EventHandler</c-></a> <a href='#handler-onblur' id='idl-definitions:handler-onblur'><c- g>onblur</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-7'><c- n>EventHandler</c-></a> <a href='#handler-oncancel' id='idl-definitions:handler-oncancel'><c- g>oncancel</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-8'><c- n>EventHandler</c-></a> <a href='#handler-oncanplay' id='idl-definitions:handler-oncanplay'><c- g>oncanplay</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-9'><c- n>EventHandler</c-></a> <a href='#handler-oncanplaythrough' id='idl-definitions:handler-oncanplaythrough'><c- g>oncanplaythrough</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-10'><c- n>EventHandler</c-></a> <a href='#handler-onchange' id='idl-definitions:handler-onchange'><c- g>onchange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-11'><c- n>EventHandler</c-></a> <a href='#handler-onclick' id='idl-definitions:handler-onclick'><c- g>onclick</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-12'><c- n>EventHandler</c-></a> <a href='#handler-onclose' id='idl-definitions:handler-onclose'><c- g>onclose</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-13'><c- n>EventHandler</c-></a> <a href='#handler-oncommand' id='idl-definitions:handler-oncommand'><c- g>oncommand</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-14'><c- n>EventHandler</c-></a> <a href='#handler-oncontextlost' id='idl-definitions:handler-oncontextlost'><c- g>oncontextlost</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-15'><c- n>EventHandler</c-></a> <a href='#handler-oncontextmenu' id='idl-definitions:handler-oncontextmenu'><c- g>oncontextmenu</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-16'><c- n>EventHandler</c-></a> <a href='#handler-oncontextrestored' id='idl-definitions:handler-oncontextrestored'><c- g>oncontextrestored</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-17'><c- n>EventHandler</c-></a> <a href='#handler-oncopy' id='idl-definitions:handler-oncopy'><c- g>oncopy</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-18'><c- n>EventHandler</c-></a> <a href='#handler-oncuechange' id='idl-definitions:handler-oncuechange'><c- g>oncuechange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-19'><c- n>EventHandler</c-></a> <a href='#handler-oncut' id='idl-definitions:handler-oncut'><c- g>oncut</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-20'><c- n>EventHandler</c-></a> <a href='#handler-ondblclick' id='idl-definitions:handler-ondblclick'><c- g>ondblclick</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-21'><c- n>EventHandler</c-></a> <a href='#handler-ondrag' id='idl-definitions:handler-ondrag'><c- g>ondrag</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-22'><c- n>EventHandler</c-></a> <a href='#handler-ondragend' id='idl-definitions:handler-ondragend'><c- g>ondragend</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-23'><c- n>EventHandler</c-></a> <a href='#handler-ondragenter' id='idl-definitions:handler-ondragenter'><c- g>ondragenter</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-24'><c- n>EventHandler</c-></a> <a href='#handler-ondragleave' id='idl-definitions:handler-ondragleave'><c- g>ondragleave</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-25'><c- n>EventHandler</c-></a> <a href='#handler-ondragover' id='idl-definitions:handler-ondragover'><c- g>ondragover</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-26'><c- n>EventHandler</c-></a> <a href='#handler-ondragstart' id='idl-definitions:handler-ondragstart'><c- g>ondragstart</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-27'><c- n>EventHandler</c-></a> <a href='#handler-ondrop' id='idl-definitions:handler-ondrop'><c- g>ondrop</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-28'><c- n>EventHandler</c-></a> <a href='#handler-ondurationchange' id='idl-definitions:handler-ondurationchange'><c- g>ondurationchange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-29'><c- n>EventHandler</c-></a> <a href='#handler-onemptied' id='idl-definitions:handler-onemptied'><c- g>onemptied</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-30'><c- n>EventHandler</c-></a> <a href='#handler-onended' id='idl-definitions:handler-onended'><c- g>onended</c-></a>;
  <c- b>attribute</c-> <a href='#onerroreventhandler' id='idl-definitions:onerroreventhandler'><c- n>OnErrorEventHandler</c-></a> <a href='#handler-onerror' id='idl-definitions:handler-onerror'><c- g>onerror</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-31'><c- n>EventHandler</c-></a> <a href='#handler-onfocus' id='idl-definitions:handler-onfocus'><c- g>onfocus</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-32'><c- n>EventHandler</c-></a> <a href='#handler-onformdata' id='idl-definitions:handler-onformdata'><c- g>onformdata</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-33'><c- n>EventHandler</c-></a> <a href='#handler-oninput' id='idl-definitions:handler-oninput'><c- g>oninput</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-34'><c- n>EventHandler</c-></a> <a href='#handler-oninvalid' id='idl-definitions:handler-oninvalid'><c- g>oninvalid</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-35'><c- n>EventHandler</c-></a> <a href='#handler-onkeydown' id='idl-definitions:handler-onkeydown'><c- g>onkeydown</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-36'><c- n>EventHandler</c-></a> <a href='#handler-onkeypress' id='idl-definitions:handler-onkeypress'><c- g>onkeypress</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-37'><c- n>EventHandler</c-></a> <a href='#handler-onkeyup' id='idl-definitions:handler-onkeyup'><c- g>onkeyup</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-38'><c- n>EventHandler</c-></a> <a href='#handler-onload' id='idl-definitions:handler-onload'><c- g>onload</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-39'><c- n>EventHandler</c-></a> <a href='#handler-onloadeddata' id='idl-definitions:handler-onloadeddata'><c- g>onloadeddata</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-40'><c- n>EventHandler</c-></a> <a href='#handler-onloadedmetadata' id='idl-definitions:handler-onloadedmetadata'><c- g>onloadedmetadata</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-41'><c- n>EventHandler</c-></a> <a href='#handler-onloadstart' id='idl-definitions:handler-onloadstart'><c- g>onloadstart</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-42'><c- n>EventHandler</c-></a> <a href='#handler-onmousedown' id='idl-definitions:handler-onmousedown'><c- g>onmousedown</c-></a>;
  [<a id='idl-definitions:legacylenientthis' href='https://webidl.spec.whatwg.org/#LegacyLenientThis' data-x-internal='legacylenientthis'><c- g>LegacyLenientThis</c-></a>] <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-43'><c- n>EventHandler</c-></a> <a href='#handler-onmouseenter' id='idl-definitions:handler-onmouseenter'><c- g>onmouseenter</c-></a>;
  [<a id='idl-definitions:legacylenientthis-2' href='https://webidl.spec.whatwg.org/#LegacyLenientThis' data-x-internal='legacylenientthis'><c- g>LegacyLenientThis</c-></a>] <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-44'><c- n>EventHandler</c-></a> <a href='#handler-onmouseleave' id='idl-definitions:handler-onmouseleave'><c- g>onmouseleave</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-45'><c- n>EventHandler</c-></a> <a href='#handler-onmousemove' id='idl-definitions:handler-onmousemove'><c- g>onmousemove</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-46'><c- n>EventHandler</c-></a> <a href='#handler-onmouseout' id='idl-definitions:handler-onmouseout'><c- g>onmouseout</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-47'><c- n>EventHandler</c-></a> <a href='#handler-onmouseover' id='idl-definitions:handler-onmouseover'><c- g>onmouseover</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-48'><c- n>EventHandler</c-></a> <a href='#handler-onmouseup' id='idl-definitions:handler-onmouseup'><c- g>onmouseup</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-49'><c- n>EventHandler</c-></a> <a href='#handler-onpaste' id='idl-definitions:handler-onpaste'><c- g>onpaste</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-50'><c- n>EventHandler</c-></a> <a href='#handler-onpause' id='idl-definitions:handler-onpause'><c- g>onpause</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-51'><c- n>EventHandler</c-></a> <a href='#handler-onplay' id='idl-definitions:handler-onplay'><c- g>onplay</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-52'><c- n>EventHandler</c-></a> <a href='#handler-onplaying' id='idl-definitions:handler-onplaying'><c- g>onplaying</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-53'><c- n>EventHandler</c-></a> <a href='#handler-onprogress' id='idl-definitions:handler-onprogress'><c- g>onprogress</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-54'><c- n>EventHandler</c-></a> <a href='#handler-onratechange' id='idl-definitions:handler-onratechange'><c- g>onratechange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-55'><c- n>EventHandler</c-></a> <a href='#handler-onreset' id='idl-definitions:handler-onreset'><c- g>onreset</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-56'><c- n>EventHandler</c-></a> <a href='#handler-onresize' id='idl-definitions:handler-onresize'><c- g>onresize</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-57'><c- n>EventHandler</c-></a> <a href='#handler-onscroll' id='idl-definitions:handler-onscroll'><c- g>onscroll</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-58'><c- n>EventHandler</c-></a> <a href='#handler-onscrollend' id='idl-definitions:handler-onscrollend'><c- g>onscrollend</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-59'><c- n>EventHandler</c-></a> <a href='#handler-onsecuritypolicyviolation' id='idl-definitions:handler-onsecuritypolicyviolation'><c- g>onsecuritypolicyviolation</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-60'><c- n>EventHandler</c-></a> <a href='#handler-onseeked' id='idl-definitions:handler-onseeked'><c- g>onseeked</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-61'><c- n>EventHandler</c-></a> <a href='#handler-onseeking' id='idl-definitions:handler-onseeking'><c- g>onseeking</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-62'><c- n>EventHandler</c-></a> <a href='#handler-onselect' id='idl-definitions:handler-onselect'><c- g>onselect</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-63'><c- n>EventHandler</c-></a> <a href='#handler-onslotchange' id='idl-definitions:handler-onslotchange'><c- g>onslotchange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-64'><c- n>EventHandler</c-></a> <a href='#handler-onstalled' id='idl-definitions:handler-onstalled'><c- g>onstalled</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-65'><c- n>EventHandler</c-></a> <a href='#handler-onsubmit' id='idl-definitions:handler-onsubmit'><c- g>onsubmit</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-66'><c- n>EventHandler</c-></a> <a href='#handler-onsuspend' id='idl-definitions:handler-onsuspend'><c- g>onsuspend</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-67'><c- n>EventHandler</c-></a> <a href='#handler-ontimeupdate' id='idl-definitions:handler-ontimeupdate'><c- g>ontimeupdate</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-68'><c- n>EventHandler</c-></a> <a href='#handler-ontoggle' id='idl-definitions:handler-ontoggle'><c- g>ontoggle</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-69'><c- n>EventHandler</c-></a> <a href='#handler-onvolumechange' id='idl-definitions:handler-onvolumechange'><c- g>onvolumechange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-70'><c- n>EventHandler</c-></a> <a href='#handler-onwaiting' id='idl-definitions:handler-onwaiting'><c- g>onwaiting</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-71'><c- n>EventHandler</c-></a> <a href='#handler-onwebkitanimationend' id='idl-definitions:handler-onwebkitanimationend'><c- g>onwebkitanimationend</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-72'><c- n>EventHandler</c-></a> <a href='#handler-onwebkitanimationiteration' id='idl-definitions:handler-onwebkitanimationiteration'><c- g>onwebkitanimationiteration</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-73'><c- n>EventHandler</c-></a> <a href='#handler-onwebkitanimationstart' id='idl-definitions:handler-onwebkitanimationstart'><c- g>onwebkitanimationstart</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-74'><c- n>EventHandler</c-></a> <a href='#handler-onwebkittransitionend' id='idl-definitions:handler-onwebkittransitionend'><c- g>onwebkittransitionend</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-75'><c- n>EventHandler</c-></a> <a href='#handler-onwheel' id='idl-definitions:handler-onwheel'><c- g>onwheel</c-></a>;
};

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='windoweventhandlers' data-dfn-type='interface'><c- g>WindowEventHandlers</c-></dfn> {
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-76'><c- n>EventHandler</c-></a> <a href='#handler-window-onafterprint' id='idl-definitions:handler-window-onafterprint'><c- g>onafterprint</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-77'><c- n>EventHandler</c-></a> <a href='#handler-window-onbeforeprint' id='idl-definitions:handler-window-onbeforeprint'><c- g>onbeforeprint</c-></a>;
  <c- b>attribute</c-> <a href='#onbeforeunloadeventhandler' id='idl-definitions:onbeforeunloadeventhandler'><c- n>OnBeforeUnloadEventHandler</c-></a> <a href='#handler-window-onbeforeunload' id='idl-definitions:handler-window-onbeforeunload'><c- g>onbeforeunload</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-78'><c- n>EventHandler</c-></a> <a href='#handler-window-onhashchange' id='idl-definitions:handler-window-onhashchange'><c- g>onhashchange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-79'><c- n>EventHandler</c-></a> <a href='#handler-window-onlanguagechange' id='idl-definitions:handler-window-onlanguagechange'><c- g>onlanguagechange</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-80'><c- n>EventHandler</c-></a> <a href='#handler-window-onmessage' id='idl-definitions:handler-window-onmessage'><c- g>onmessage</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-81'><c- n>EventHandler</c-></a> <a href='#handler-window-onmessageerror' id='idl-definitions:handler-window-onmessageerror'><c- g>onmessageerror</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-82'><c- n>EventHandler</c-></a> <a href='#handler-window-onoffline' id='idl-definitions:handler-window-onoffline'><c- g>onoffline</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-83'><c- n>EventHandler</c-></a> <a href='#handler-window-ononline' id='idl-definitions:handler-window-ononline'><c- g>ononline</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-84'><c- n>EventHandler</c-></a> <a href='#handler-window-onpagehide' id='idl-definitions:handler-window-onpagehide'><c- g>onpagehide</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-85'><c- n>EventHandler</c-></a> <a href='#handler-window-onpagereveal' id='idl-definitions:handler-window-onpagereveal'><c- g>onpagereveal</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-86'><c- n>EventHandler</c-></a> <a href='#handler-window-onpageshow' id='idl-definitions:handler-window-onpageshow'><c- g>onpageshow</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-87'><c- n>EventHandler</c-></a> <a href='#handler-window-onpageswap' id='idl-definitions:handler-window-onpageswap'><c- g>onpageswap</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-88'><c- n>EventHandler</c-></a> <a href='#handler-window-onpopstate' id='idl-definitions:handler-window-onpopstate'><c- g>onpopstate</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-89'><c- n>EventHandler</c-></a> <a href='#handler-window-onrejectionhandled' id='idl-definitions:handler-window-onrejectionhandled'><c- g>onrejectionhandled</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-90'><c- n>EventHandler</c-></a> <a href='#handler-window-onstorage' id='idl-definitions:handler-window-onstorage'><c- g>onstorage</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-91'><c- n>EventHandler</c-></a> <a href='#handler-window-onunhandledrejection' id='idl-definitions:handler-window-onunhandledrejection'><c- g>onunhandledrejection</c-></a>;
  <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-92'><c- n>EventHandler</c-></a> <a href='#handler-window-onunload' id='idl-definitions:handler-window-onunload'><c- g>onunload</c-></a>;
};</code></pre>

  <h5 id=event-firing><span class=secno>8.1.8.3</span> Event firing<a href=#event-firing class=self-link></a></h5>

  <p>Certain operations and methods are defined as firing events on elements. For example, the <code id=event-firing:dom-click><a href=interaction.html#dom-click>click()</a></code> method on the <code id=event-firing:htmlelement><a href=dom.html#htmlelement>HTMLElement</a></code> interface is defined as
  firing a <code id=event-firing:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event on the element. <a href=references.html#refsUIEVENTS>[UIEVENTS]</a></p>

  <p><dfn id=fire-a-synthetic-pointer-event>Firing a synthetic pointer event named
  <var>e</var></dfn> at <var>target</var>, with an optional <var>not trusted flag</var>, means
  running these steps:</p>

  <ol><li><p>Let <var>event</var> be the result of <a id=event-firing:creating-an-event href=https://dom.spec.whatwg.org/#concept-event-create data-x-internal=creating-an-event>creating an event</a> using
   <code id=event-firing:pointerevent><a data-x-internal=pointerevent href=https://w3c.github.io/pointerevents/#pointerevent-interface>PointerEvent</a></code>.<li><p>Initialize <var>event</var>'s <code id=event-firing:dom-event-type><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> attribute to
   <var>e</var>.<li><p>Initialize <var>event</var>'s <code id=event-firing:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=event-firing:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attributes to true.<li><p>Set <var>event</var>'s <a id=event-firing:composed-flag href=https://dom.spec.whatwg.org/#composed-flag data-x-internal=composed-flag>composed flag</a>.<li><p>If the <var>not trusted flag</var> is set, initialize <var>event</var>'s <code id=event-firing:dom-event-istrusted><a data-x-internal=dom-event-istrusted href=https://dom.spec.whatwg.org/#dom-event-istrusted>isTrusted</a></code> attribute to false.<li><p>Initialize <var>event</var>'s <code>ctrlKey</code>, <code>shiftKey</code>, <code>altKey</code>, and <code>metaKey</code>
   attributes according to the current state of the key input device, if any (false for any keys
   that are not available).<li><p>Initialize <var>event</var>'s <code id=event-firing:dom-uievent-view><a data-x-internal=dom-uievent-view href=https://w3c.github.io/uievents/#dom-uievent-view>view</a></code> attribute to
   <var>target</var>'s <a id=event-firing:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <code id=event-firing:window><a href=nav-history-apis.html#window>Window</a></code> object, if any, and null
   otherwise.<li><p><var>event</var>'s <code>getModifierState()</code> method is to return values
   appropriately describing the current state of the key input device.<li><p>Return the result of <a href=https://dom.spec.whatwg.org/#concept-event-dispatch id=event-firing:concept-event-dispatch data-x-internal=concept-event-dispatch>dispatching</a>
   <var>event</var> at <var>target</var>.</ol>

  <p><dfn id=fire-a-click-event>Firing a <code>click</code> event</dfn>
  at <var>target</var> means <a href=#fire-a-synthetic-pointer-event id=event-firing:fire-a-synthetic-pointer-event>firing a synthetic
  pointer event named <code>click</code></a> at <var>target</var>.</p>

  


  <h3 id=windoworworkerglobalscope-mixin><span class=secno>8.2</span> The <code id=windoworworkerglobalscope-mixin:windoworworkerglobalscope><a href=#windoworworkerglobalscope>WindowOrWorkerGlobalScope</a></code> mixin<a href=#windoworworkerglobalscope-mixin class=self-link></a></h3>

  <p>The <code id=windoworworkerglobalscope-mixin:windoworworkerglobalscope-2><a href=#windoworworkerglobalscope>WindowOrWorkerGlobalScope</a></code> mixin is for use of APIs that are to be exposed on
  <code id=windoworworkerglobalscope-mixin:window><a href=nav-history-apis.html#window>Window</a></code> and <code id=windoworworkerglobalscope-mixin:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code> objects.</p>

  <p class=note>Other standards are encouraged to further extend it using <code>partial
  interface mixin <a href=#windoworworkerglobalscope id=windoworworkerglobalscope-mixin:windoworworkerglobalscope-3>WindowOrWorkerGlobalScope</a> { … };</code> along with an
  appropriate reference.</p>

  <pre><code class='idl'><c- b>typedef</c-> (<c- b>DOMString</c-> <c- b>or</c-> <a href='https://webidl.spec.whatwg.org/#common-Function' id='windoworworkerglobalscope-mixin:idl-function' data-x-internal='idl-function'><c- n>Function</c-></a> <c- b>or</c-> <a href='https://w3c.github.io/trusted-types/dist/spec/#trusted-script' id='windoworworkerglobalscope-mixin:tt-trustedscript' data-x-internal='tt-trustedscript'><c- n>TrustedScript</c-></a>) <dfn id='timerhandler' data-dfn-type='typedef'><c- g>TimerHandler</c-></dfn>;

<c- b>interface</c-> <c- b>mixin</c-> <dfn id='windoworworkerglobalscope' data-dfn-type='interface'><c- g>WindowOrWorkerGlobalScope</c-></dfn> {
  [<c- g>Replaceable</c->] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-origin' id='windoworworkerglobalscope-mixin:dom-origin'><c- g>origin</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-issecurecontext' id='windoworworkerglobalscope-mixin:dom-issecurecontext'><c- g>isSecureContext</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-crossoriginisolated' id='windoworworkerglobalscope-mixin:dom-crossoriginisolated'><c- g>crossOriginIsolated</c-></a>;

  <c- b>undefined</c-> <a href='#dom-reporterror' id='windoworworkerglobalscope-mixin:dom-reporterror'><c- g>reportError</c-></a>(<c- b>any</c-> <c- g>e</c->);

  // base64 utility methods
  <c- b>DOMString</c-> <a href='#dom-btoa' id='windoworworkerglobalscope-mixin:dom-btoa'><c- g>btoa</c-></a>(<c- b>DOMString</c-> <c- g>data</c->);
  <c- b>ByteString</c-> <a href='#dom-atob' id='windoworworkerglobalscope-mixin:dom-atob'><c- g>atob</c-></a>(<c- b>DOMString</c-> <c- g>data</c->);

  // timers
  <c- b>long</c-> <a href='timers-and-user-prompts.html#dom-settimeout' id='windoworworkerglobalscope-mixin:dom-settimeout'><c- g>setTimeout</c-></a>(<a href='#timerhandler' id='windoworworkerglobalscope-mixin:timerhandler'><c- n>TimerHandler</c-></a> <c- g>handler</c->, <c- b>optional</c-> <c- b>long</c-> <c- g>timeout</c-> = 0, <c- b>any</c->... <c- g>arguments</c->);
  <c- b>undefined</c-> <a href='timers-and-user-prompts.html#dom-cleartimeout' id='windoworworkerglobalscope-mixin:dom-cleartimeout'><c- g>clearTimeout</c-></a>(<c- b>optional</c-> <c- b>long</c-> <c- g>id</c-> = 0);
  <c- b>long</c-> <a href='timers-and-user-prompts.html#dom-setinterval' id='windoworworkerglobalscope-mixin:dom-setinterval'><c- g>setInterval</c-></a>(<a href='#timerhandler' id='windoworworkerglobalscope-mixin:timerhandler-2'><c- n>TimerHandler</c-></a> <c- g>handler</c->, <c- b>optional</c-> <c- b>long</c-> <c- g>timeout</c-> = 0, <c- b>any</c->... <c- g>arguments</c->);
  <c- b>undefined</c-> <a href='timers-and-user-prompts.html#dom-clearinterval' id='windoworworkerglobalscope-mixin:dom-clearinterval'><c- g>clearInterval</c-></a>(<c- b>optional</c-> <c- b>long</c-> <c- g>id</c-> = 0);

  // microtask queuing
  <c- b>undefined</c-> <a href='timers-and-user-prompts.html#dom-queuemicrotask' id='windoworworkerglobalscope-mixin:dom-queuemicrotask'><c- g>queueMicrotask</c-></a>(<a href='https://webidl.spec.whatwg.org/#VoidFunction' id='windoworworkerglobalscope-mixin:idl-voidfunction' data-x-internal='idl-voidfunction'><c- n>VoidFunction</c-></a> <c- g>callback</c->);

  // ImageBitmap
  <a href='https://webidl.spec.whatwg.org/#idl-promise' id='windoworworkerglobalscope-mixin:idl-promise' data-x-internal='idl-promise'><c- b>Promise</c-></a>&lt;<a id='windoworworkerglobalscope-mixin:imagebitmap' href='imagebitmap-and-animations.html#imagebitmap'><c- n>ImageBitmap</c-></a>&gt; <a href='imagebitmap-and-animations.html#dom-createimagebitmap' id='windoworworkerglobalscope-mixin:dom-createimagebitmap'><c- g>createImageBitmap</c-></a>(<a id='windoworworkerglobalscope-mixin:imagebitmapsource' href='imagebitmap-and-animations.html#imagebitmapsource'><c- n>ImageBitmapSource</c-></a> <c- g>image</c->, <c- b>optional</c-> <a id='windoworworkerglobalscope-mixin:imagebitmapoptions' href='imagebitmap-and-animations.html#imagebitmapoptions'><c- n>ImageBitmapOptions</c-></a> <c- g>options</c-> = {});
  <a href='https://webidl.spec.whatwg.org/#idl-promise' id='windoworworkerglobalscope-mixin:idl-promise-2' data-x-internal='idl-promise'><c- b>Promise</c-></a>&lt;<a id='windoworworkerglobalscope-mixin:imagebitmap-2' href='imagebitmap-and-animations.html#imagebitmap'><c- n>ImageBitmap</c-></a>&gt; <a href='imagebitmap-and-animations.html#dom-createimagebitmap' id='windoworworkerglobalscope-mixin:dom-createimagebitmap-2'><c- g>createImageBitmap</c-></a>(<a id='windoworworkerglobalscope-mixin:imagebitmapsource-2' href='imagebitmap-and-animations.html#imagebitmapsource'><c- n>ImageBitmapSource</c-></a> <c- g>image</c->, <c- b>long</c-> <c- g>sx</c->, <c- b>long</c-> <c- g>sy</c->, <c- b>long</c-> <c- g>sw</c->, <c- b>long</c-> <c- g>sh</c->, <c- b>optional</c-> <a id='windoworworkerglobalscope-mixin:imagebitmapoptions-2' href='imagebitmap-and-animations.html#imagebitmapoptions'><c- n>ImageBitmapOptions</c-></a> <c- g>options</c-> = {});

  // structured cloning
  <c- b>any</c-> <a href='structured-data.html#dom-structuredclone' id='windoworworkerglobalscope-mixin:dom-structuredclone'><c- g>structuredClone</c-></a>(<c- b>any</c-> <c- g>value</c->, <c- b>optional</c-> <a id='windoworworkerglobalscope-mixin:structuredserializeoptions' href='web-messaging.html#structuredserializeoptions'><c- n>StructuredSerializeOptions</c-></a> <c- g>options</c-> = {});
};
<a id='windoworworkerglobalscope-mixin:window-2' href='nav-history-apis.html#window'><c- n>Window</c-></a> <c- b>includes</c-> <a href='#windoworworkerglobalscope' id='windoworworkerglobalscope-mixin:windoworworkerglobalscope-4'><c- n>WindowOrWorkerGlobalScope</c-></a>;
<a id='windoworworkerglobalscope-mixin:workerglobalscope-2' href='workers.html#workerglobalscope'><c- n>WorkerGlobalScope</c-></a> <c- b>includes</c-> <a href='#windoworworkerglobalscope' id='windoworworkerglobalscope-mixin:windoworworkerglobalscope-5'><c- n>WindowOrWorkerGlobalScope</c-></a>;</code></pre>

  <dl class=domintro><dt><code>self.<a href=#dom-issecurecontext id=dom-issecurecontext-dev>isSecureContext</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/isSecureContext title="The global isSecureContext read-only property returns a boolean indicating whether the current context is secure (true) or not (false).">isSecureContext</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>49+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>47+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>15+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns whether or not this global object represents a <a href=#secure-context id=windoworworkerglobalscope-mixin:secure-context>secure context</a>.
   <a href=references.html#refsSECURE-CONTEXTS>[SECURE-CONTEXTS]</a><dt><code>self.<a href=#dom-origin id=dom-origin-dev>origin</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/origin title="The global origin read-only property returns the origin of the global scope, serialized as a string.">origin</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>54+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>59+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the global object's <a id=windoworworkerglobalscope-mixin:concept-origin href=browsers.html#concept-origin>origin</a>, serialized as string.<dt><code>self.<a href=#dom-crossoriginisolated id=dom-crossoriginisolated-dev>crossOriginIsolated</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/crossOriginIsolated title="The global crossOriginIsolated read-only property returns a boolean value that indicates whether the website is in a cross-origin isolation state. That state mitigates the risk of side-channel attacks and unlocks a few capabilities:">crossOriginIsolated</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>72+</span></span><span class="safari yes"><span>Safari</span><span>15.2+</span></span><span class="chrome yes"><span>Chrome</span><span>87+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>87+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns whether scripts running in this global are allowed to use APIs that require
   cross-origin isolation. This depends on the `<code id=windoworworkerglobalscope-mixin:cross-origin-opener-policy-2><a href=browsers.html#cross-origin-opener-policy-2>Cross-Origin-Opener-Policy</a></code>` and
   `<code id=windoworworkerglobalscope-mixin:cross-origin-embedder-policy><a href=browsers.html#cross-origin-embedder-policy>Cross-Origin-Embedder-Policy</a></code>` HTTP response headers and the "<code id=windoworworkerglobalscope-mixin:cross-origin-isolated-feature><a href=infrastructure.html#cross-origin-isolated-feature>cross-origin-isolated</a></code>" feature.</dl>

  <div class=example>
   <p>Developers are strongly encouraged to use <code>self.origin</code> over <code>location.origin</code>. The former returns the <a id=windoworworkerglobalscope-mixin:concept-origin-2 href=browsers.html#concept-origin>origin</a> of the environment,
   the latter of the URL of the environment. Imagine the following script executing in a document on
   <code>https://stargate.example/</code>:</p>

   <pre><code class='js'><c- a>var</c-> frame <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;iframe&quot;</c-><c- p>)</c->
frame<c- p>.</c->onload <c- o>=</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
  <c- a>var</c-> frameWin <c- o>=</c-> frame<c- p>.</c->contentWindow
  console<c- p>.</c->log<c- p>(</c->frameWin<c- p>.</c->location<c- p>.</c->origin<c- p>)</c-> <c- c1>// &quot;null&quot;</c->
  console<c- p>.</c->log<c- p>(</c->frameWin<c- p>.</c->origin<c- p>)</c-> <c- c1>// &quot;https://stargate.example&quot;</c->
<c- p>}</c->
document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->frame<c- p>)</c-></code></pre>

   <p><code>self.origin</code> is a more reliable security indicator.</p>
  </div>

  

  <p>The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-issecurecontext data-dfn-type=attribute><code>isSecureContext</code></dfn> getter steps are to return true if
  <a id=windoworworkerglobalscope-mixin:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#relevant-settings-object id=windoworworkerglobalscope-mixin:relevant-settings-object>relevant settings object</a> is a <a href=#secure-context id=windoworworkerglobalscope-mixin:secure-context-2>secure context</a>, or
  false otherwise.</p>

  <p>The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-origin data-dfn-type=attribute><code>origin</code></dfn> getter steps are to return <a id=windoworworkerglobalscope-mixin:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
  <a href=#relevant-settings-object id=windoworworkerglobalscope-mixin:relevant-settings-object-2>relevant settings object</a>'s <a href=#concept-settings-object-origin id=windoworworkerglobalscope-mixin:concept-settings-object-origin>origin</a>, <a href=browsers.html#ascii-serialisation-of-an-origin id=windoworworkerglobalscope-mixin:ascii-serialisation-of-an-origin>serialized</a>.</p>

  <p>The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-crossoriginisolated data-dfn-type=attribute><code>crossOriginIsolated</code></dfn> getter steps are to return
  <a id=windoworworkerglobalscope-mixin:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#relevant-settings-object id=windoworworkerglobalscope-mixin:relevant-settings-object-3>relevant settings object</a>'s <a href=#concept-settings-object-cross-origin-isolated-capability id=windoworworkerglobalscope-mixin:concept-settings-object-cross-origin-isolated-capability>cross-origin isolated
  capability</a>.</p>

  


  <h3 id=atob><span class=secno>8.3</span> Base64 utility methods<a href=#atob class=self-link></a></h3>

  <p>The <code id=atob:dom-atob><a href=#dom-atob>atob()</a></code> and <code id=atob:dom-btoa><a href=#dom-btoa>btoa()</a></code> methods
  allow developers to transform content to and from the base64 encoding.</p>

  <p class=note>In these APIs, for mnemonic purposes, the "b" can be considered to stand for
  "binary", and the "a" for "ASCII". In practice, though, for primarily historical reasons, both the
  input and output of these functions are Unicode strings.</p>

  <dl class=domintro><dt><code><var>result</var> = self.<a href=#dom-btoa id=dom-btoa-dev>btoa</a>(<var>data</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/btoa title="The btoa() method creates a Base64-encoded ASCII string from a binary string (i.e., a string in which each character in the string is treated as a byte of binary data).">btoa</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>Takes the input data, in the form of a Unicode string containing only characters in the range
    U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, and
    converts it to its base64 representation, which it returns.</p>

    <p>Throws an <a id=atob:invalidcharactererror href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>
    if the input string contains any out-of-range characters.</p>
   <dt><code><var>result</var> = self.<a href=#dom-atob id=dom-atob-dev>atob</a>(<var>data</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/atob title="The atob() function decodes a string of data which has been encoded using Base64 encoding. You can use the btoa() method to encode and transmit data which may otherwise cause communication problems, then transmit it and use the atob() method to decode the data again. For example, you can encode, transmit, and decode control characters such as ASCII values 0 through 31.">atob</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>Takes the input data, in the form of a Unicode string containing base64-encoded binary data,
    decodes it, and returns a string consisting of characters in the range U+0000 to U+00FF, each
    representing a binary byte with values 0x00 to 0xFF respectively, corresponding to that binary
    data.</p>

    <p>Throws an <a id=atob:invalidcharactererror-2 href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    input string is not valid base64 data.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-btoa data-dfn-type=method><code id=dom-windowbase64-btoa>btoa(<var>data</var>)</code></dfn> method must throw an
  <a id=atob:invalidcharactererror-3 href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if <var>data</var>
  contains any character whose code point is greater than U+00FF. Otherwise, the user agent must
  convert <var>data</var> to a byte sequence whose <var>n</var>th byte is the eight-bit
  representation of the <var>n</var>th code point of <var>data</var>, and then must apply
  <a id=atob:forgiving-base64-encode href=https://infra.spec.whatwg.org/#forgiving-base64-encode data-x-internal=forgiving-base64-encode>forgiving-base64 encode</a> to that byte sequence and return the result.</p>

  <p>The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-atob data-dfn-type=method><code id=dom-windowbase64-atob>atob(<var>data</var>)</code></dfn> method steps are:</p>

  <ol><li><p>Let <var>decodedData</var> be the result of running <a id=atob:forgiving-base64-decode href=https://infra.spec.whatwg.org/#forgiving-base64-decode data-x-internal=forgiving-base64-decode>forgiving-base64 decode</a>
   on <var>data</var>.<li><p>If <var>decodedData</var> is failure, then throw an
   <a id=atob:invalidcharactererror-4 href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Return <var>decodedData</var>.</ol>

  


  <nav><a href=speculative-loading.html>← 7.6 Speculative loading</a> — <a href=index.html>Table of Contents</a> — <a href=dynamic-markup-insertion.html>8.4 Dynamic markup insertion →</a></nav>
